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+JSP checkBox 全选具体实现
Jan 02 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 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
转换中文日期的PHP程序
2006/10/09 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
使用python实现生成用户信息
2017/03/20 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
python list转矩阵的实例讲解
2018/08/04 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
安全生产专项整治方案
2014/05/06 职场文书
行政工作试用期自我评价
2014/09/14 职场文书