本文共 2776 字，大约阅读时间需要 9 分钟。

vue + Element上传多个文件，支持删除重新上传，上传后将后台返回的URL发送给后台存到数据库

             
                
                   
      
       点击上传
                  
               
            
   

data () {
       return {
         visible: false,      doUrl: '',      fileList: [],      dataForm: {
           id: '',        version: '',        closeNum: 1,        settleIds: '',        dealResult: 1,        sendObj: '区农经站主管部门',        promptRemark: '',        attachmentUrls: ''      }    }  },

methods: {
       init () {
         this.doUrl = `${
     window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${
     localStorage.getItem('token')}`      this.visible = true    },    handleExceed (files, fileList) {
         return this.$message.warning('当前限制最多可以上传3个文件')    },    //文件删除的钩子函数(该钩子默认执行 :on-remove="handleRemove"和该钩子不写也行)    handleRemove (file,fileList) {
       	this.fileChange(fileList);    },    //文件上传成功后的钩子函数    uploadSuccess (res, file, fileList) {
         this.fileChange(fileList);    },    fileChange(file,fileList) {
         let tempStr = '';      if (fileList.length > 0) {
           for (let i = 0; i < fileList.length; i++) {
             if (fileList[i].response) {
               if (fileList[i].response.code === 0) {
                 if (i === 0) {
                   tempStr += fileList[i].response.data.src;              } else {
                   tempStr += ',' + fileList[i].response.data.src;              }            }          } else if (fileList[i].status && fileList[i].status === 'success') {
               if (i === 0) {
                 tempStr += fileList[i].url;            } else {
                 tempStr += ',' + fileList[i].url;            }          }        }      }      this.dataForm.attachmentUrls = tempStr;    },    // 上传图片前调用方法    beforeUploadPicture (file) {
         const is10M = file.size / 1024 / 1024 < 10      if (!is10M) {
           this.$message.error('文件大小不能超过10MB!')        return false      }      return true    },    // 表单提交    dataFormSubmitHandle: debounce(function () {
         this.$refs.dataForm.validate((valid) => {
           if (!valid) {
             return false        }        if (!this.dataForm.id) {
             return false        }        this.$http.post('townEarlyWarningEvent/townEarlyWarningEvent/byHandle', this.dataForm).then(({
    data: res }) => {
             if (res.code !== 0) {
               return this.$message.error(res.msg)          }          this.$message({
               message: this.$t('prompt.success'),            type: 'success',            duration: 500,            onClose: () => {
                 this.visible = false              this.$emit('refreshDataList')            }          })        }).catch(() => {
   })      })    }, 1000, {
    leading: true, trailing: false })  }

转载地址：https://blog.csdn.net/weixin_45877686/article/details/114591007 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！