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

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

   
    
  
    
     

     
      
multiple :limit="3"
      
class="upload-demo"
      
:action="doUrl"
      
:on-exceed="handleExceed"
      
:before-upload="beforeUploadPicture"
      
:on-success="uploadSuccess"
      
:on-remove="handleRemove"
      
:file-list="fileList" :show-file-list="true">
      
  
      
       点击上传
       

      
     
     
  
     

    
   

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 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！