位置: 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日期时间选择器限制可选时间范围(精确时分秒)

  • ipad怎么左右两个屏(ipad怎么设置左右滑动)

    ipad怎么左右两个屏(ipad怎么设置左右滑动)

  • 京东快递怎么查询在哪里取件(京东快递怎么查历史寄件)

    京东快递怎么查询在哪里取件(京东快递怎么查历史寄件)

  • 华为怎么换手机铃声(华为怎么换手机字体类型)

    华为怎么换手机铃声(华为怎么换手机字体类型)

  • qq音乐交易额度限制(qq音乐交易额度限制1138)

    qq音乐交易额度限制(qq音乐交易额度限制1138)

  • 抖音关小黑屋 出来是不是就没播放量了(抖音关小黑屋了怎么最快把它搞出来啊)

    抖音关小黑屋 出来是不是就没播放量了(抖音关小黑屋了怎么最快把它搞出来啊)

  • 微信点赞不让共同好友看到(微信点赞不让共同好友看到华为)

    微信点赞不让共同好友看到(微信点赞不让共同好友看到华为)

  • 钉钉小窗口播放会计入时长吗(钉钉小窗口播放算不算观看)

    钉钉小窗口播放会计入时长吗(钉钉小窗口播放算不算观看)

  • 快手店铺可以关闭重开吗(快手店铺关闭,去哪里要求快手平台退款)

    快手店铺可以关闭重开吗(快手店铺关闭,去哪里要求快手平台退款)

  • wps打印快捷键(wps的打印快捷键)

    wps打印快捷键(wps的打印快捷键)

  • 计算机按用途可分为(计算机按用途可以分为通用计算机和专用计算机)

    计算机按用途可分为(计算机按用途可以分为通用计算机和专用计算机)

  • 安卓手机微信夜间模式怎么关闭(安卓手机微信有夜间模式吗)

    安卓手机微信夜间模式怎么关闭(安卓手机微信有夜间模式吗)

  • t440s笔记本哪一年的(t440p笔记本怎么样)

    t440s笔记本哪一年的(t440p笔记本怎么样)

  • 手机充电线老松怎么处理(手机充电线老松掉是什么原因)

    手机充电线老松怎么处理(手机充电线老松掉是什么原因)

  • 数据结构包括数据的什么结构和什么结构(数据结构包括数据的存储结构及结构上的())

    数据结构包括数据的什么结构和什么结构(数据结构包括数据的存储结构及结构上的())

  • 为什么苹果11充电这么慢(为什么苹果11充不进去电)

    为什么苹果11充电这么慢(为什么苹果11充不进去电)

  • 苹果11后盖什么材质(苹果后盖什么样的好)

    苹果11后盖什么材质(苹果后盖什么样的好)

  • 苹果手机云闪付在哪里(苹果手机云闪付收银台怎么用)

    苹果手机云闪付在哪里(苹果手机云闪付收银台怎么用)

  • 手机忘记放哪里了怎么找出来(手机忘记放哪里了怎么语音唤醒)

    手机忘记放哪里了怎么找出来(手机忘记放哪里了怎么语音唤醒)

  • 怎么设置抖音赞提醒(怎么设置抖音赞不提醒)

    怎么设置抖音赞提醒(怎么设置抖音赞不提醒)

  • 魅族应用没有启动界面(魅族应用没有启动界面怎么解除啊?)

    魅族应用没有启动界面(魅族应用没有启动界面怎么解除啊?)

  • 如何使用章鱼输入法(章鱼输入法怎么打字)

    如何使用章鱼输入法(章鱼输入法怎么打字)

  • 电脑装了两个系统怎么删除一个(电脑装了两个系统)

    电脑装了两个系统怎么删除一个(电脑装了两个系统)

  • 百度小程序如何添加到桌面(百度小程序如何开发)

    百度小程序如何添加到桌面(百度小程序如何开发)

  • win11屏幕键盘在哪? win11调出触屏键盘的技巧(win11windows键没反应)

    win11屏幕键盘在哪? win11调出触屏键盘的技巧(win11windows键没反应)

  • 没有销项购买税金税盘如何做账
  • 房产税计税依据包括土地价值吗
  • 施工单位缴税实例
  • 广交会展务
  • 受托代销商品款和受托代销商品的区别
  • 生产成本二级科目有工资吗
  • 消费税征收项目
  • 出纳人员怎么核酸检测
  • 充值费用优惠怎么取消
  • 员工因为过错给公司造成损失
  • 双倍余额递减法考虑净残值吗
  • 留抵进项税抵欠税后期末未交增值税会减少吗
  • 进项票已认证忘记开票
  • 定额发票是需要备注吗
  • 存货占比小有什么影响
  • 外商企业需要交企业所得税吗
  • 货物销售价比采购价高
  • 公司开设食堂需要哪些手续
  • 费用应计入管理费用的有
  • 变动成本总额怎么求单位变动成本
  • 税盘服务费抵税分录
  • 固定资产发现入账错误折旧如何处理?
  • 定向增发利好还是利空股票
  • 一个集团的分公司干过活再去另一个分公司会被发现吗
  • 企业的营业外收入要交增值税吗
  • win10玩游戏fps低怎么办
  • linux模块的概念
  • 月末季末年末会计都需要做什么
  • 存货损失是指什么
  • 债务重组收益的计算
  • 巴尼奥斯附近的阿格杨瀑布
  • html中a标签怎么引用图片
  • 谷歌浏览器无法安装
  • ts类型声明 要为某个文件里的变量声明吗
  • vue的路由跳转了,可是页面没有变化
  • PHP+JQuery+Ajax实现分页方法详解
  • 免征增值税的规定
  • 公司的银行账号是不是和个人账号不一样
  • 房租增值税怎么计算
  • 企业应付职工薪酬
  • python sockets
  • 万元发票和千元发票
  • 残保金相关内容有哪些
  • 资产管理业务是表外业务吗
  • 筹建期间的费用计入什么费用
  • sql server使用sql语句
  • 注销公司流程超详细
  • 核定征收企业盈利怎么算
  • 零申报对企业有什么影响
  • 购买银行理财产品的几个必须知道
  • 申请刻制发票专用章要求
  • 本年利润怎么结转成未分配利润
  • 建安工程预缴税额怎么算
  • 住宿费开专票怎么做账
  • 房租进项发票怎么处理
  • 将外购商品作为非货币
  • 企业清算处置固定资产
  • 哪些情况应收账款不能扣
  • 出售无形资产净损失
  • 专票错误已认证需要退回吗?
  • 执行企业会计准则的非上市企业
  • 应收帐款 发票
  • linux下apache、mysql、php安装配置详细笔记
  • sqlserver2000怎么用
  • MSSQL转MYSQL,gb2312转utf-8无乱码解决方法
  • freebsd 网卡驱动
  • 怎么才能使牙齿变白
  • linux which ls
  • win7中文显示问号
  • 64位windows8系统安装驱动时出现签名错误的解决方法
  • 如何判断肾虚阴虚阳虚
  • linux常用桌面环境
  • 升级win10系统后无法联网的三种解决方法
  • android 基础
  • react和nodejs
  • jquery悬浮窗
  • window运行怎么打开
  • 打不死的小强励志词句
  • 电力行业增值税管理办法
  • 辽宁省电子税务局操作手册
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设