element-ui中el-upload多文件一次性上传的实现


Posted in Javascript onDecember 02, 2020

项目需求是多个文件上传,在一次请求中完成,而ElementUI的上传组件是每个文件发一次上传请求,因此我们借助FormData的格式向后台传文件组

html代码

<div class="upload-file">
 <el-upload
   accept=".xlsx"
   ref="upload"
   multiple
   :limit="5"
   action="http://xxx.xxx.xxx/personality/uploadExcel"
   :on-preview="handlePreview"
   :on-change="handleChange"
   :on-remove="handleRemove"
   :on-exceed="handleExceed"
   :file-list="fileList"
   :http-request="uploadFile"
   :auto-upload="false">
   <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
   <el-button style="margin-left: 133px;" size="small" type="success" @click="submitUpload">上传到服务器
   </el-button>
   <div slot="tip" class="el-upload__tip">只能上传xlsx文件,且不超过100m</div>
 </el-upload>
 </div>

修改:auto-upload="false"属性为false,阻止组件的自动上传
:http-request="uploadFile"覆盖上传事件
@click=“submitUpload”,给上传按钮绑定事件

element-ui中el-upload多文件一次性上传的实现

data() {
	return {
		fileData: '', // 文件上传数据(多文件合一)
		fileList: [],  // upload多文件数组
		uploadData: {
     fieldData: {
      id: '', // 机构id,
     }
    },
	}
}


methods:{
		// 上传文件
		uploadFile(file) {
		  this.fileData.append('files', file.file); // append增加数据
		},
		
		// 上传到服务器
	   submitUpload() {
	      let fieldData = this.uploadData.fieldData; // 缓存,注意,fieldData不要与fileData看混
	      if (fieldData.id === '') {
	        this.$message({
	          message: '请选择上传机构',
	          type: 'warning'
	        })
	      } else if (this.fileList.length === 0) {
	        this.$message({
	          message: '请先选择文件',
	          type: 'warning'
	        })
	      } else {
	        const isLt100M = this.fileList.every(file => file.size / 1024 / 1024 < 100);
	        if (!isLt100M) {
	          this.$message.error('请检查,上传文件大小不能超过100MB!');
	        } else {
	          this.fileData = new FormData(); // new formData对象
	          this.$refs.upload.submit(); // 提交调用uploadFile函数
	          this.fileData.append('pathId', fieldData.id); // 添加机构id
	          this.fileData.append('loginToken', this.loginToken); // 添加token
	          post(this.baseUrlData.url_02 + ":8090/personality/uploadExcel", this.fileData).then((response) => {
	            if (response.data.code === 0) {
	              this.$message({
	                message: "上传成功",
	                type: 'success'
	              });
	              this.fileList = [];
	            } else {
	              this.$message({
	                message: response.data.desc,
	                type: 'error'
	              })
	            }
	          });
	        }
	      }
	    },
	    
      //移除
      handleRemove(file, fileList) {
        this.fileList = fileList;
        // return this.$confirm(`确定移除 ${ file.name }?`);
      },

      // 选取文件超过数量提示
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 5 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
      },	   

			 //监控上传文件列表
      handleChange(file, fileList) {
        let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
        if (existFile) {
          this.$message.error('当前文件已经存在!');
          fileList.pop();
        }
        this.fileList = fileList;
      },
}

此时就达到上传4个文件只发送了一个xhr请求了

element-ui中el-upload多文件一次性上传的实现

到此这篇关于element-ui中el-upload多文件一次性上传的实现的文章就介绍到这了,更多相关el-upload多文件上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
domReady的实现案例
Nov 23 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 #Vue.js
keep-alive保持组件状态的方法
Dec 02 #Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 #Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 #Vue.js
JS实现超级好看的鼠标小尾巴特效
Dec 01 #Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 #Javascript
浅谈es6中的元编程
Dec 01 #Javascript
You might like
Windows下的PHP安装pear教程
2014/10/24 PHP
PHP整合PayPal支付
2015/06/11 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
jquery获得keycode的示例代码
2013/12/30 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
django有哪些好处和优点
2020/09/01 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
高一语文教学反思
2016/02/16 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB