vue elementUI批量上传文件


Posted in Vue.js onApril 26, 2022

elementUI 如何处理文件批量上传

问题

elementUI的Upload上传组件,通过设置multiple为true,就可以实现多选文件;但是在处理的时候还是一个一个传上去。目前需要在所有文件上传后,将某几个上传错误的结果拼接起来做一次提醒

解决

this.$refs.upload.uploadFiles

该属性可以获取上传的文件相关信息,包括上传后后端返回的response

html

el-upload
  ref='upload'
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :on-success='upLoadSuccess'
  accept=".doc,.docx">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传doc/docx文件</div>
</el-upload>

方法处理 

upLoadSuccess(response, file, fileList) {
    if (this.$refs.upload.uploadFiles) {
        let length = this.$refs.upload.uploadFiles.length
        this.UpLoadFilesLength ++  // 全局变量,用来计算upLoadSuccess方法调用次数
        if (this.UpLoadFilesLength == length) {
            this.UpLoadAllFilesLength = 0  // 如果方法调用的次数和文件列表的长度相同,说明所有文件都上传完毕,将该全局变量置0
            this.resErrorStr() // 该函数处理每个文件上传错误情况下response拼接
        }
    }
},
resErrorStr() {
    if (this.$refs.upload.uploadFiles) { // 如果存在这个值
        let filesList = this.$refs.upload.uploadFiles.slice()
        let UpLoadAllErrorStr = '' // 错误信息拼接变量
        for (let i = 0; i < filesList.length; i++) {
            if (filesList[i].response) {
                if (filesList[i].response.code != 200) { // 如果该文件上传后返回的状态值不是200,则说明该文件上传错误
                    UpLoadAllErrorStr += `${filesList[i].response.message}<br/>`
                }
            }
        }
        if (!UpLoadAllErrorStr) {
            this.$message({ type: 'success', message: '上传文件成功!' });
        } else {
            this.$message({
                type: 'error',
                dangerouslyUseHTMLString: true,
                message: UpLoadAllErrorStr
            });
        }
        this.$refs.uploadAll.uploadFiles = [] // 调用完成之后将值置空,防止再次上传将上次结果也记录下来
    }
},
handleRemove(file, fileList) {
    console.log(file, fileList);
},
handlePreview(file) {
    console.log(file);
},
beforeRemove(file, fileList) {
    return this.$confirm(`确定移除 ${ file.name }?`);
}

elementUI批量上传下载注意事项

批量手动上传文件,和表单数据一起提交

在el-upload组件关键的钩子,其它省略

  • multiple
  • :auto-upload = "false"
  • :file-list = "fileList"
  • :on-change = "selectFile"  (里面是把上传的fileList传给自定义的  this.fileList)

点击上传,将多个文件和表单数据一起上传

a.定义FormData,将表单数据和文件填充到FormData里面

b.自定义请求头部,Content-type:‘multipart/form-data’

let formData = new FormData()
for(let key in data){
    if(data[key]){
      formData.append(key,data[key])
    } 
}
this.fileList.forEach((element,i) =>{
  formData.append('fileList',element.raw)
})
let rs = await axios({
  method:'post',
  url: cfg.uploadURL + '/sp/addSp',
  data: formData,
  headers:{
    'Content-type':'multipart/form-data'
  } 
})

表格中上传文件中,组件钩子函数自带参数

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="(file,fileList)=>{
     return beforeRemove(file,fileList,scope.$index)
  }"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
beforeRemove(file,fileList,index){
    console.log(index)
}

批量下载(后台不返回压缩包,前端就一个个下载了)

download(val){
  let vals = val.split(',') //后台返回的文件标识符数组
  vals.forEach((element) =>{
    const iframe = document.createElement("iframe");
    iframe.style.display = "none";
    iframe.style.height = 0;
    iframe.src = cfg.baseURL+'下载路径'+element; 
    document.body.appendChild(iframe); 
    setTimeout(()=>{
      iframe.remove();
    }, 1000)
  })
}
Vue.js 相关文章推荐
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 #Vue.js
如何vue使用el-table遍历循环表头和表体数据
vue 把二维或多维数组转一维数组
Apr 24 #Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 #Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
vue @click.native 绑定原生点击事件
Apr 22 #Vue.js
vue实现省市区联动 element-china-area-data插件
You might like
支持oicq头像的留言簿(二)
2006/10/09 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
JavaScript 变量作用域分析
2011/07/04 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python assert的用处示例详解
2019/04/01 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
python cumsum函数的具体使用
2019/07/29 Python
django 微信网页授权登陆的实现
2019/07/30 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
adidas泰国官网:adidas TH
2020/07/11 全球购物
《掌声》教学反思
2014/02/23 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书