vue elementUI怎么处理文件批量上传

这篇文章主要介绍了vue elementUI怎么处理文件批量上传的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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.class="lazy" data-src = cfg.baseURL+'下载路径'+element;     document.body.appendChild(iframe);     setTimeout(()=>{      iframe.remove();    }, 1000)  })}

关于“vue elementUI怎么处理文件批量上传”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue elementUI怎么处理文件批量上传”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。