vue + Element上传多个文件,支持删除重新上传,上传后将后台返回的URL发送给后台存到数据库
发布日期:2022-02-24 01:06:50 浏览次数:2 分类:技术文章

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

上一篇:java获取当前月份第一天和最后一天的时间和时间戳
下一篇:各种最短路径算法

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.36.149.40]2022年06月21日 14时45分53秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章

插入排序——直接插入排序 2019-07-26 18:46:28
选择排序——快速排序 2019-07-26 18:46:28
交换排序——冒泡排序 2019-07-26 18:46:28
选择排序——堆排序 2019-07-26 18:46:27
选择排序 - 直接选择排序 2019-07-26 18:46:27
Java Threads 多线程10分钟参考手册 2019-07-26 18:46:26
团队需要的六种人 2019-07-26 18:46:26
iPhone开发【二十四】数据持久化总结之第4篇—sqlite3数据库 2019-07-26 18:46:25
iPhone开发【二十三】常用IOS开源组件【第1篇】 2019-07-26 18:46:24
iPhone开发【二十二】数据持久化总结之第3篇—归档(NSKeyedArchiver、NSKeyedUnarchiver) 2019-07-26 18:46:24
iPhone开发【二十一】数据持久化总结之第2篇—属性文件(.plist) 2019-07-26 18:46:23
iPhone开发【二十】数据持久化总结之第1篇—NSUserDefaults 2019-07-26 18:46:23
iPhone开发【十九】XML解析之NSXMLParser(使用Web Services查询火车信息) 2019-07-26 18:46:22
iPhone开发【十八】自定义视图之ActionSheet中使用PickerView 2019-07-26 18:46:21
散步 —— 莫怀戚 2019-07-26 18:46:21
iPhone开发【十七】多线程开发之NSOperation&NSOperationQueue——异步下载图片 2019-07-26 18:46:20
iPhone开发【十六】实现点击一个UIImageView时打开键盘 2019-07-26 18:46:20
iPhone开发【十五】多线程开发之NSThread——异步下载图片 2019-07-26 18:46:19
iPhone开发【十四】多线程开发之NSThread——子线程模拟耗时操作 2019-07-26 18:46:18
iPhone开发【十三】动画效果之最简单的动画——动态加载图片 2019-07-26 18:46:18