Shulou(Shulou.com)05/31 Report--

This article mainly introduces the vue elementUI how to deal with file batch upload related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this vue elementUI how to deal with file batch upload article will have a harvest, let's take a look.

How to deal with the problem of bulk upload of files by elementUI

The Upload upload component of elementUI can select multiple files by setting multiple to true, but it is still uploaded one by one when processing. At present, you need to make a reminder of the results of some upload errors after all the files have been uploaded.

Resolve this.$refs.upload.uploadFiles

This attribute can obtain information about uploaded files, including the response returned by the backend after uploading.

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 "> Click upload can only upload doc/docx files

Method treatment

UpLoadSuccess (response, file, fileList) {if (this.$refs.upload.uploadFiles) {let length = this.$refs.upload.uploadFiles.length this.UpLoadFilesLength + + / / global variable, used to calculate the number of upLoadSuccess method calls if (this.UpLoadFilesLength = = length) {this.UpLoadAllFilesLength = 0 / / if the number of method calls is the same as the length of the file list, all files have been uploaded Set the global variable to 0 this.resErrorStr () / / this function handles response splicing} in the case of each file upload error, resErrorStr () {if (this.$refs.upload.uploadFiles) {/ / if the value let filesList = this.$refs.upload.uploadFiles.slice () let UpLoadAllErrorStr =''/ / error message splicing variable for (let I = 0) exists. I

< filesList.length; i++) { if (filesList[i].response) { if (filesList[i].response.code != 200) { // 如果该文件上传后返回的状态值不是200，则说明该文件上传错误 UpLoadAllErrorStr += `${filesList[i].response.message}` } } } 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'}})

In uploading files in the table, the component hook function has its own parameters.

Click upload to upload only jpg/png files, and do not exceed 500kbbeforeRemove (file,fileList,index) {console.log (index)}

Batch download (if the compressed package is not returned in the background, the front end will download one by one)

Download (val) {let vals = val.split (',') / / an array of file identifiers returned by the backend vals.forEach ((element) = > {const iframe = document.createElement ("iframe"); iframe.style.display = "none"; iframe.style.height = 0; iframe.src = cfg.baseURL+' download path'+ element; document.body.appendChild (iframe); setTimeout () = > {iframe.remove ()) }, 1000)})} this is the end of the article on "how vue elementUI handles bulk upload of files". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to deal with bulk upload of files by vue elementUI". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.