elementui使用el-upload组件如何实现自定义上传_vue.js_

     部署流程定义  

beforeUpload (file) { // 上传文件之前钩子   const type = file.name.split('.')[1]   if (type !== 'bpmn') {     this.$message({ type: 'error', message: '只支持bpmn文件格式！' })     return false   } }, uploadBpmn (param) { // 部署流程定义（点击按钮，上传bpmn文件，上传成功后部署，然后重新加载列表）   const formData = new FormData()   formData.append('processDefinition', param.file) // 传入bpmn文件   this.$API({     name: 'deploy',     data: formData,     headers: {'Content-Type': 'multipart/form-data'}   }).then(res => {     if (res.data.code == 0) {       this.$message({ type: 'success', message: res.data.msg })     } else {       this.$message({ type: 'error', message: res.data.msg })     }   }).catch(error => {     this.$message({ type: 'error', message: error })   }).finally(() => {     this.getList()   }) },

::v-deep .el-upload-list {   display: none !important; }

  mounted() {     if (this.$route.query.type === 'folder') {       this.$nextTick(() => {         document.querySelector('.el-upload__input').webkitdirectory = true       })     }   },

// 自定义的全局组件my-component let _utils = new Utils() Vue.component( 'uploadfile', { props: { uploaddata: { type: Object } }, template: `
表名称:{{uploaddata.sheetname}}选择文件
`, data() { return {} }, methods: { /* 上传文件之前的钩子，参数为上传的文件， 若返回 false 或者返回 Promise 且被 reject，则停止上传。 */ beforeUpload(file){ const fileSuffix = file.name.substring(file.name.lastIndexOf(".")+1); const whiteList = ["xls", "xlsx"]; if (whiteList.indexOf(fileSuffix) === -1) { _utils.MessageError(this,"上传文件只能是xls、xlsx格式") return false; } const isLt2M = file.size / 1024 / 1024 < 5; if (!isLt2M) { _utils.MessageError(this,"上传文件大小不能超过5MB") return false; } }, handleRemove(file, fileList) { }, handleSuccess(response, file, fileList) { let {code, msg} = response if (code == 0) { utils.MessageSuccess(this, "文件上传成功") } else { utils.MessageError(this, msg) } }, /* 点击文件列表中已上传的文件时的钩子 */ handlePreview(file) { // console.log(file); }, /* 文件超出个数限制时的钩子 */ handleExceed(files, fileList) { }, /* 删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除 */ beforeRemove(file, fileList) { // return this.$confirm(`确定移除 ${file.name}？`); } } } )