el-upload多文件上传;el-upload采用递归依次上传文件;el-upload采用递归在上一个文件上传成功后再传下一个文件

场景: 需求是接口一次上传一个文件,前一个文件上传成功后再调下一个接口上传下一个文件
el-upload本身就支持多文件上传。但是它是并发进行,例如:选择一千个文件后,是一千个文件自动立马并行调用一千个后端接口去上传。这样容易把服务器搞爆。
.
网上还有,将一千个文件放在一个接口里上传。这一样也容易把服务器搞爆 (具体看下方逻辑详解第4点)
.
我采用的是一次选择一千个文件后, 递归先上传第一个文件,第一个接口上传成功或者失败后,再调后端第二个接口上传第二个文件,依次等待上传完一千个文件(具体看下方逻辑详解第4点)。 这样优缺点就是:上传时间比较长,需要等前一个传好才会进行下一个,但是这样服务器压力小不会爆掉。

在这里插入图片描述

主要逻辑详解:
1.属性:auto-upload=“false” ,设置fallse否后,就阻止了文件的立即上传功能了,变成手动或者调用接口上传。之前一次选择1000个后会立即调用1000个接口就是立即上传导致的。
.
2.属性:auto-upload=“false” ,设置fallse否后,原来的上传前和上传成功事件就都不会触发了,action好像也无效了,只会触发上传change事件、上传失败事件、和上传个数超限事件
.
3.注意change事件,一次选了1000条后,change事件也会执行1000次(第一次是1个文件、第二次是两个文件、第1000次拿到1000个文件…),所以我在这里写了个防抖事件time。通过防抖,可以知道什么时候,change事件结束了,也就知道什么时候拿到了所有的文件。此时就可以去做上传调后端接口的功能了。
.
4.因为我是想减少服务器压力,既在上一个文件上传结束后,再去上传下一个文件。故,我采用了递归一次传一个(递归逻辑在submitUpload2事件里)。同样的,如果你想只调用一次接口,将1000个文件传给后端,那么你就将submitUpload2递归事件给修改调,改成调一次接口,传所有file文件数组即可(具体看你们后端的数据结构)。
.
5.因为是上传多个文件,时间肯定长,如果你不想继续传递后续文件,就调用submitAbort即可。但是element文档说的abort()取消上传事件不生效。所以我是直接将上传列表给置空了,所以递归也就结束了就不传递了。
.
6.同样因为上传时间长,我就设置了进度条(当前已上传的个数/所有需要上传个数)。但是你如果切换到其他页面的话,再切换到当前上传vue页面,因为生命周期原因导致看不到上传进度。所以可以将这个上传vue页面使用keep-alive进行路由缓存,这样除了刷新浏览器外,切换到当前页还是会读缓存会看到上传进度。(如果你既想要缓存进度条,又想要刷新页面的list等某些数据,那么你缓存此页面,然后在activated单独调获取list数据方法即可)。
.
7.因为我的需要是,选择文件成功后,默认去上传,所以我是在防抖事件后就去调递归上传了。正常情况下,其实需要点击这个按钮然后去上传的,既手动点击上传(被注释掉了)<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload2">手动点击上传</el-button> -->

以下代码可直接复制使用(注意将axios的接口上传地址改成自己的)!

<template><div class="group_insurance_order1" style="padding-top:100px;"><!--:auto-upload="false" 是否在选取文件后立即进行上传 false阻止自动上传 -- 且上传前和上传成功的事件都不会再触发 只会触发@change事件了:http-request="uploadFile"  覆盖默认的上传行为,可以自定义上传的实现(this.$refs.upload1.submit()  会触发调用uploadFile函数)--><el-upload ref="upload1" class="upload-demo" action="/chc-shop/api/v1/accident/szcp/electronicfile/upload" accept=".pdf" :disabled="disabledUpload" :auto-upload="false" :on-change="changeFile" :on-error='fileErr' :on-exceed="handleExceed" :file-list="fileList1" :before-upload="beforeAvatarUpload" :on-success="msgSuccessOne" :data="fileData" list-type="picture" drag :show-file-list="false" :multiple="true" :limit="1000"><i class="el-icon-upload"></i><div class="el-upload__text" style="margin-top: -10px;line-height: 20px;">将文件拖到此处,<em v-if="!disabledUpload">或点击上传(单个文件需小于100M,一次最多上传1000个pdf文件)</em><em v-else>(文件正在上传中,请等待...</em></div></el-upload><div><!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload2">手动点击上传</el-button> --><el-button v-if="showPercent" style="margin-left: 10px;" size="small" type="success" @click="submitAbort">取消后续文件上传</el-button></div><div style="color:orange;" v-if="showPercent">上传过程请勿刷新浏览器和跳转其他页面...</div><!-- 进度条 --><el-progress v-if="showPercent" :percentage="Number((percentNow*100/percentTotal).toFixed(0))"></el-progress></div>
</template><script>
import axios from 'axios'
export default {data () {return {fileNum: '',  // 单词递归上传的文件upFileList: '',//需要依次上传的待传列表percentTotal: 0,//总上传个数percentNow: 0,//当前上传个数showDesc: '',//结束文案showPercent: false,//显示上传进度条time: null,// change事件是否结束 是否可以直接调手动上传事件(目前设置1.5s)disabledUpload: false,//正在上传中 禁止再次选择文件上传fileData: {},//上传参数fileList1: [],}},activated: {// 对于每次进入页面想要刷新的数据,放在这里调用即可 例如 this.getList()},methods: {// 超出限制个数提示handleExceed (files, fileList) {console.log('当前限制一次性最多上传1000个文件', files, fileList)this.$message.warning("当前限制一次性最多上传1000个文件")},changeFile (file, fileList) {this.disabledUpload = trueconsole.log('changeFile', file, fileList)const isLt2M = file.size / 1024 / 1024 < 100if (!isLt2M) {this.$message.warning('上传文件大小不能超过 100M')// return false // 这个return无效 故去掉}if (!(file.name.indexOf('.pdf') > -1)) {this.$message.warning("当前仅支持pdf格式的文件上传")// return false // 这个return无效 故去掉}// 符合条件的进入待传列表this.upFileList = []for (let x of fileList) {if (x.raw && (x.name.indexOf('.pdf') > -1) && (x.size / 1024 / 1024 < 100)) {// 过滤掉非pdf 和小于100M的this.upFileList.push(x.raw)this.percentTotal = this.upFileList.lengththis.percentNow = 0this.showPercent = falsethis.showDesc = ''}}clearTimeout(this.time)this.time = setTimeout(() => {this.time = nullconsole.log('防抖 高频触发后n秒内只会执行一次  再次触发重新计时')this.fnBegin()//说明此时change了所有文件了 可以上传了}, 1500)},fnBegin () {console.log('此时change了所有文件 开始上传', this.upFileList)this.submitUpload2()},// 正式上传掉后端接口submitUpload2 () {if (this.upFileList.length > 0) {this.showPercent = truethis.fileNum = new FormData()  // new formData对象this.fileNum.append('file', this.upFileList[0])  // append增加数据this.fileNum.append('name', this.upFileList[0].name)  // append增加数据let _vm = thisaxios({url: '/chc-shop/api/v1/accident/szcp/electronicfile/upload',headers: {"Content-Type": "multipart/form-data",},method: "post",data: this.fileNum,}).then(res2 => {// 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉this.percentNow = this.percentNow + 1this.upFileList.shift()console.log('上传返回', res2)if (res2.data.success) {// this.$message({//   message: "上传成功",//   type: 'success'// })// 进行递归 上传下一个this.submitUpload2()} else {_vm.$message({message: res2.data.return_message || '上传失败',type: "error",})// 进行递归 上传下一个this.showDesc = '上传结束,部分文件上传失败'this.submitUpload2()}}).catch(error => {console.log(error)_vm.$message({message: error || '上传失败',type: "error",})// 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉this.percentNow = this.percentNow + 1this.upFileList.shift()// 进行递归 上传下一个this.showDesc = '上传结束,部分文件上传失败'this.submitUpload2()})} else {this.disabledUpload = falsethis.showPercent = falsethis.upFileList = [] //清空待传列表this.$refs.upload1.clearFiles()this.fileList1 = []if ((this.percentNow == this.percentTotal) && this.percentTotal) {this.$message.success(this.showDesc ? this.showDesc : '已全部上传成功!')this.percentTotal = 0this.percentNow = 0this.showDesc = ''} else if ((this.percentNow == this.percentTotal) && this.percentTotal == 0) {this.$message.warning('请先选择文件!')this.percentTotal = 0this.percentNow = 0} else {this.$message.success('已部分上传成功,且取消后续文件上传!')this.percentTotal = 0this.percentNow = 0}return false}},// 终止后需上传submitAbort () {this.showPercent = false// .abort()不生效,故自己直接将this.upFileList置空 那么就不会走到递归了 就制止后续的上传了this.upFileList = []// this.upFileList.forEach(ele => {//   this.$refs.upload1.abort(ele)// })// this.$refs.upload1.abort()// this.$message.warning('已取消后续文件上传!')},fileErr (err, file, fileList) {this.$message({message: file.name + '上传失败',type: "error",})},// 这两个事件不会再触发--因为阻止了自动上传beforeAvatarUpload (file) {console.log('上传文件前', file)},msgSuccessOne (data, file, fileList) {console.log('成功', file)},},
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402945.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

昨天事情还是比较多,让我晚上加了会班

今天早上睡的有点沉&#xff0c;然后昨天晚上也是睡的早10&#xff1a;00 转载于:https://www.cnblogs.com/bkchengzheng/p/5891271.html

.Net (C#)委托和事件(获取多个返回值)

From: http://www.xuebuyuan.com/841530.html 在讲如何获取多个返回值之前先来看一个小例子&#xff1a; private void button1_Click(object sender, EventArgs e) { int Number 200; //设置Number的值为 200。 Publishser pub new…

el-dialog点击弹框外区域不关闭弹框;

el-dialog正常点击弹框外区域是关闭弹框&#xff0c;如若不想关闭弹框&#xff0c;设置如下属性即可&#xff1a; :close-on-click-modal"false"

Xen的起源与工作原理

如今&#xff0c;虚拟化市场上满是各种不同的虚拟化解决方案。多年以来&#xff0c;VMware一直控制着基于i386的虚拟化市场。然而&#xff0c;现在的开源解决方案Xen也 在迅速地扩张自己的市场。在本文中&#xff0c;TechTarget中国的特约虚拟化专家Sander van Vugt将介绍什么是…

男女完全匹配算法

#include<iostream> #include<String> #include"Free_W_M_Stack.cpp" using namespace std; int Number1(string elem, string A[], int n){//返回某个人的匹配号for (int i 0; i < n; i){if (elem A[i])return i;}return -1; } int main(){int n;/…

监听el-dialog关闭弹窗事件;el-dialog注册@close关闭事件

场景&#xff1a;在关闭el-dialog弹框时候&#xff0c;做数据清空。只需要给el-dialog注册close关闭事件即可&#xff1a; <el-dialog title"标题" :visible.sync"bind" size"small" closecloseDialog> </el-dialog>//关闭弹框的事件…

手机游戏赚钱到底有多难?接入运营商或需一年

假如你是一个手机游戏创业者&#xff0c;假如你想赚钱&#xff0c;亲&#xff0c;请先与运营商搞好关系&#xff0c;或者&#xff0c;请找一个有SP经验或者熟悉手机游戏审批流程的合作伙伴&#xff0c;否则&#xff0c;等待你的将是甚至长达一年的审批期。 先来讲讲我为何要写这…

总是骗人的你

从这周来&#xff0c;就一直在和周围的人说着要结束实习。到现在&#xff0c;也没有办法办理离职。我现在已经看不起自己了&#xff0c;我已经成为我当初讨厌的人&#xff0c;嘴里一直嚷嚷着&#xff0c;却一直都做不到。还不停的给周围的人说&#xff0c;我想&#xff0c;这种…

Controller向View传值方式总结

From: http://www.cnblogs.com/guohu/p/4377974.html 总结发现ASP.NET MVC中Controller向View传值的方式共有6种&#xff0c;分别是&#xff1a; ViewBagViewDataTempData向普通View页面传一个Model对象向强类型页面传传一个Model对象用一个ViewModel对象解决所有问题 首先我们…

el-table-column动态显示与隐藏

两个不同条件下共用一个el-table表格&#xff0c;并且通过v-if控制某一列的显示与否。 若不生效&#xff0c;则按照如下设置。 ​​​​​​​<el-table-column v-if"undo" label"xxxx" prop"xx" min-width"110" show-overflow-too…

重装系统后,快盘不能拷贝进文件的解决办法

给对应账号的的虚拟磁盘文件&#xff0c;添加"Authenticated Users"账户的权限

记录一次bug解决过程:数据迁移

一 总结不擅长语言表达&#xff0c;勤于沟通&#xff0c;多锻炼 调试MyBatis中SQL语法:foreach 问题&#xff1b;缺少关键字VALUES。很遗憾&#xff1a;它的错误报的让人找不着北。 二 BUG描述&#xff1a;MyBatis中批量插入数据异常 <?xml version"1.0" encodin…

el-tabs标签页浏览器卡死;使用el-tab-pane浏览器卡死;element-ui使用el-tab-pane浏览器卡死,el-tab,el-tab-pane版本不兼容

在项目中使用了el-tabs标签页卡死&#xff0c;一直刷新加载中 出现该问题的原因主要是版本不兼容的问题 首先找到package.json&#xff0c;将以下vue版本修改为2.6.0&#xff0c;element-ui版本修改为2.13.2&#xff1a; “element-ui”: “2.13.2” “vue”: “2.6.0” “vue-…

.net 获取网站根目录的方法

From: http://www.cnblogs.com/wenbo/archive/2011/08/09/2132620.html 获取网站根目录的方法有几种如&#xff1a; Server.MapPath(Request.ServerVariables["PATH_INFO"])    Server.MapPath("/")    Server.MapPath("")//当前代码文件所在…

2013年3月16日星期六

今天第11周&#xff0c;本来是双休&#xff0c;结果要加班&#xff0c;本来要加班写详细设计结果被做画面自适应解决现场问题。本来想回来一个人安静写详细设计&#xff0c;结果却一直在看电影聊天&#xff0c;似乎回来后就不能控制自己了&#xff0c;有点痛苦

繁华模拟赛 ljw分雕塑

/* 用f[i][k]表示考虑到第i个雕塑&#xff0c;分成k组&#xff0c;可不可行&#xff08;这是一个bool类型的数组&#xff09; 转移&#xff1a; f[i][k]f[j][k-1],sum[i]-sum[j]合法 */ #include <cstdio> #include <cstdlib> #include <cstring> #include &…

el-table滚动加载数据;vue自定义指令监听el-table的滚动事件,达到滚动条滚动到底部加载新数据

首先在vue项目中的main.js文件添加一个监听el-table滚动条事件的自定义指令&#xff0c;以供全局使用 // 监听el-table滚动 Vue.directive(loadmore, {bind(el, binding) {const selectWrap el.querySelector(.el-table__body-wrapper)selectWrap.addEventListener(scroll, fu…

PHPMailer - PHP email transport class

在服务器安装 sendmail sudo apt-get install sendmail启动 sendmailsudo /etc/init.d/sendmail start 修改 php.ini [mail function] SMTP localhost smtp_port 25 sendmail_from meexample.com Function sendMail <?php /* 调用PHPMailer发送电邮 * param String $r…

Razor语法大全

From: http://www.cnblogs.com/dengxinglin/p/3352078.html Razor是基于framewor4以上写的一个开源项目&#xff1a;https://github.com/Antaris/RazorEngine/ Razor是包含了模板引擎和动态编译两部分。本部分就简单记录了模板引擎的一些语法&#xff0c;之后用Razor做一个代码…

ArcGIS Engine开发之旅02--ArcGIS Engine中的类库

原文 ArcGIS Engine开发之旅02--ArcGIS Engine中的类库 System类库 System类库是ArcGIS体系结构中最底层的类库。System类库包含给构成ArcGIS的其他类库提供服务的组件。System类库中定义了大量开发者可以实现的接口。AoInitializer对象就是在System类库中定义的&#xff0c;所…