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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
JS跨域问题详解
2014/11/25 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
解决python 输出是省略号的问题
2018/04/19 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
大学生志愿者感言
2014/01/15 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
酒店前台辞职书
2015/02/26 职场文书
公司回复函格式
2015/07/14 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL