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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
小程序自动化测试的示例代码
2020/08/11 Javascript
python多线程扫描端口示例
2014/01/16 Python
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
pytorch的batch normalize使用详解
2020/01/15 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
在校生自我鉴定
2014/01/23 职场文书
业务内勤岗位职责
2014/04/30 职场文书
先进党支部事迹材料
2014/12/24 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫