vue elementUI 处理文件批量上传方式

 更新时间:2022年04月26日 14:49:54   作者:伊人笑桃花酒  
这篇文章主要介绍了vue elementUI 处理文件批量上传方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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前端和Django后端如何查询一定时间段内的数据

    vue前端和Django后端如何查询一定时间段内的数据

    这篇文章主要给大家介绍了关于vue前端和Django后端如何查询一定时间段内的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • Vue中filter使用及根据id删除数组元素方式

    Vue中filter使用及根据id删除数组元素方式

    这篇文章主要介绍了Vue中filter使用及根据id删除数组元素方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解vuex commit保存数据技巧

    详解vuex commit保存数据技巧

    这篇文章主要介绍了详解vuex commit保存数据技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue实现无限级树形选择器

    Vue实现无限级树形选择器

    这篇文章主要介绍了Vue实现无限级树形选择器,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-09-09
  • Vue循环中多个input绑定指定v-model实例

    Vue循环中多个input绑定指定v-model实例

    这篇文章主要介绍了Vue循环中多个input绑定指定v-model实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 解决vue2中使用axios http请求出现的问题

    解决vue2中使用axios http请求出现的问题

    下面小编就为大家分享一篇解决vue2中使用axios http请求出现的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 老生常谈vue的生命周期

    老生常谈vue的生命周期

    这篇文章主要为大家详细介绍了vue的生命周期,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • vue iview封装模态框的方法

    vue iview封装模态框的方法

    这篇文章主要为大家详细介绍了vue iview封装模态框的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • ant-design-vue中tree增删改的操作方法

    ant-design-vue中tree增删改的操作方法

    这篇文章主要介绍了ant-design-vue中tree增删改的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • 关于Uncaught(in promise)TypeError: list is not iterable报错解决

    关于Uncaught(in promise)TypeError: list is not iterable报错

    这篇文章主要给大家介绍了关于Uncaught(in promise)TypeError: list is not iterable报错的解决方法,文中通过示例代码介绍的非常详细,对大家学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08

最新评论