位置: IT常识 - 正文

Vue 批量上传,使用 el-upload 实现批量上传文件只调用一个请求,只需要一个上传按钮(vue批量上传图片至oss)

编辑:rootadmin
Vue 批量上传,使用 el-upload 实现批量上传文件只调用一个请求,只需要一个上传按钮 背景介绍需求背景后端需要批量对上传的文件进行处理原生的 el-upload 批量上传会多次调用上传接口,不支持一次调用前端需要对选择的文件进行批量校验

推荐整理分享Vue 批量上传,使用 el-upload 实现批量上传文件只调用一个请求,只需要一个上传按钮(vue批量上传图片至oss),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue批量上传图片至oss,vue批量上传图片,vue批量上传文件,vue批量上传图片,vue批量上传文件报错,vue批量上传图片至oss,vue批量上传文件,vue批量上传图片,内容如对您有帮助,希望把文章链接给更多的朋友!

2、使用 el-upload是因为:

项目是基于饿了吗组件库开发的,不想再引入其他的组件进行开发;原生的input实现上传样式处理也比较费劲。

在网上看了大家的实现方案,发现要不然就是使用 input 进行批量上传;使用 el-upload的场景都需要两个按钮【选择文件、上传】才能实现上面的诉求,考虑到这样的交互都不太友好,所以使用自己的方式实现。

一、实现效果

先来说说实现的效果,点击上传按钮,弹出文件选择,选择后直接调用上传接口进行上传,只调用一个接口。

项目效果 功能效果

Vue 批量上传,使用 el-upload 实现批量上传文件只调用一个请求,只需要一个上传按钮(vue批量上传图片至oss)

请求 template代码 request代码

二、具体说明0. data变量说明data() { return { uploadCfg: { fileList: [], // 默认绑定的文件列表 validFileList: [] // 通过校验的文件列表 } }; }

下面来解释下以上template中重要的两个组件属性

1. handleBeforeUpload

上传文件之前的校验:至少要包含一个excel文件;如果校验通过,请求接口;如果校验不通过,终止接口的请求,并给出校验不通过的提示。

/** * @desc 上传之前进行文件校验 * @param file 当前文件 */handleBeforeUpload(file){ let vm = this; return new Promise((resolve, reject) => { // 收集文件列表 this.uploadCfg.validFileList.push(file); // 校验文件列表 vm.handleDebounceVarifyFile(); setTimeout(function (){ if (!_.isEmpty(vm.uploadCfg.validFileList)){ resolve(true); } else { reject(true); } }, 100); });}

可以看到这里返回了Promise,看下官方给的解释,如下图,就是说支持用 Promise的方式返回结果,没有直接返回 false的原因下面说明一下。

el-upload的handleBeforeUpload会在批量上传的时候触发多次,即选择几个文件就会调用几次,我们的需求是,至少要包含一个excel文件,这种情况下需要收集所有选中的文件进行批量校验,单个的触发是不能满足的,所以这里使用了一个【防抖函数】handleDebounceVarifyFile通过短时间内最后一次触发,来达到批量校验文件的效果。 因为会多次触发,所以这里的校验函数,返回的是一个Promise。

下面是防抖函数的逻辑说明,具体可以根据自己的应用场景去开发这里的逻辑

/** * @desc 防抖触发文件上传前,保证批量校验 */handleDebounceVarifyFile: _.debounce(function (){ let excel_file = {}; if (_.isEmpty(this.uploadCfg.validFileList)){ return; } excel_file = this.uploadCfg.validFileList.find(item => { return /\.(xls)|\.(xlsx)$/.test(item.name); }); // 如果文件校验不合理,清空合法文件列表,并提示 if (_.isEmpty(excel_file)){ this.uploadCfg.validFileList = []; this.$message.warning('至少上传一个xls或者xlsx格式的文件!'); }}, 20)2. handleUploadHttp

这里使用自定义的上传方法,和上传前校验一样, el-ipload默认会多次调用上传接口,我们需要做的也是使用防抖的思路,控制最后一次触发上传回调的时候去构造批量的文件数据,请求接口,下面是具体代码:

/** * @desc 自定义上传 */ handleUploadHttp(){ this.handleDebounceUpload(); }/** * @desc 防抖触发文件上传前,保证批量上传 */ handleDebounceUpload: _.debounce(function (){ if (_.isEmpty(this.uploadCfg.validFileList)){ return; } let formData = new FormData(); this.uploadCfg.validFileList.forEach((item_file) =>{ formData.append(`files`,item_file); }); batchUploadApi.uploadXsxx(formData).then(()=> { this.$message.success('附件已上传成功,请等待数据入库!'); this.uploadCfg.validFileList = []; }).catch(err => { console.log('批量上传附件失败', err); });}, 20)三、结语

至此,个人认为比较完美的解决了问题,分享出来希望可以帮助到有同样问题的人~

本文链接地址:https://www.jiuchutong.com/zhishi/287284.html 转载请保留说明!

上一篇:最贵的域名是什么(最贵的域名是什么名字)

下一篇:ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒)

  • 税务师补报名时间可以交费吗
  • 计提个税会计科目怎么做
  • 税金及附加会计分录
  • 国债收益率如何定价
  • 普通发票被作废的话财务会发现吗
  • 非盈利组织的银行是什么
  • 委托邮政企业投诉电话
  • 土地增值税清算是什么意思
  • 不动产在建工程使用的外购物资可以抵扣吗
  • 不同税率的产品可以开一张票里吗
  • 分工分类法
  • 去新建的外贸公司好不好
  • 天然气税费
  • 生产人员社保计入哪个科目
  • 城市垃圾处理项目
  • 员工收到货款不交公司,法律规定
  • 车船使用牌照税收多少
  • 投资活动净现金流为负说明什么
  • ai自动生成代码
  • 出差的住宿费较高的原因
  • Win11怎么设置开机跳过密码
  • win10如何关闭windows安全中心图标
  • 苹果手机最新款2023新上市
  • 提供劳务收入怎么交税
  • php数组函数 菜鸟
  • 借用资质(挂靠施工)的法律责任如何判断?
  • 差旅费报销会计凭证
  • 增值税账务处理 一般纳税人
  • php模板教程
  • 以前年度损益调整结转到哪里
  • map获取entry
  • 车船税每年都要多少钱
  • 免费学电脑的网站
  • 发票申请条件
  • 税款已缴纳可以作废申报吗
  • 合并报表中为什么要抵损益
  • 增值税附加税有哪几种
  • 高速费发票可以重开吗
  • mongodb数据表设计怎么写
  • 清税证明怎么在网上申请
  • 残疾人就业保障金会计分录怎么做
  • SQLServer2005与SQLServer2008数据库同步图文教程
  • 应交税费的账务处理一般纳税人
  • 包装物的账务处理例题
  • 律师事务所账务处理例题
  • 零余额账户用款额度是什么意思
  • 一般纳税人购买原材料会计分录
  • 多交的应交税费资产负债表怎么填
  • 进口增值税已付什么意思
  • 预提成本费用的会计分录
  • 印花税是根据什么计算的
  • 法人代表可以兼任出纳吗
  • 纳税人财务会计制度
  • 会计凭证审核标准有哪些
  • MySQL 5.6 (Win7 64位)下载、安装与配置图文教程
  • 如何快速提升花呗额度
  • yum源如何配置
  • softmangerlite.exe是什么进程 有什么用
  • win7浏览器主页怎么设置
  • 鲁大师安装失败怎么回事
  • sdl_init
  • 免安装版怎么用
  • shell脚本用法
  • 定时删除一个文件怎么删
  • opengl transform
  • perl删除文件夹
  • opengl教程48讲
  • javascript字体属性
  • linux shell脚本攻略(第3版)
  • Android Studio Attach source code
  • 基于nodejs的项目
  • javascript getattribute
  • python所有语句
  • javascript基础
  • js拖拽排序实现思路
  • 税务稽查操作规范
  • 安徽省各地区最低录取中考分数线
  • 小孩一卡通丢了去哪里补办,需要什么证件
  • 广东发票查验平台下载
  • 什么是深入调研工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设