elementUI How to handle batch upload of files
question
The Upload upload component of elementUI can realize multiple selection files by setting multiple to true; however, it is still uploaded one by one during processing.
At present, after all files are uploaded, several upload errors need to be spliced together to make a reminder
solve
this.$
This property can obtain information about uploaded files, including the response returned by the backend after uploading
html
el-upload ref='upload' class="upload-demo" action="/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :on-success='upLoadSuccess' accept=".doc,.docx"> <el-button size="small" type="primary">Click to upload</el-button> <div slot="tip" class="el-upload__tip">Uploadable onlydoc/docxdocument</div> </el-upload>
Method processing
upLoadSuccess(response, file, fileList) {
if (this.$) {
let length = this.$
++ // Global variable used to calculate the number of calls to upLoadSuccess method if ( == length) {
= 0 // If the number of method calls and the length of the file list is the same, it means that all files have been uploaded and set the global variable to 0 () // This function handles response stitching in case of upload errors for each file }
}
},
resErrorStr() {
if (this.$) { // If this value exists let filesList = this.$()
let UpLoadAllErrorStr = '' // Error message splicing variable for (let i = 0; i < ; i++) {
if (filesList[i].response) {
if (filesList[i]. != 200) { // If the status value returned after uploading the file is not 200, it means that the file is uploaded incorrectly UpLoadAllErrorStr += `${filesList[i].}<br/>`
}
}
}
if (!UpLoadAllErrorStr) {
this.$message({ type: 'success', message: 'The upload of the file was successful! ' });
} else {
this.$message({
type: 'error',
dangerouslyUseHTMLString: true,
message: UpLoadAllErrorStr
});
}
this.$ = [] // After the call is completed, the value will be empty to prevent the upload from being recorded again. }
},
handleRemove(file, fileList) {
(file, fileList);
},
handlePreview(file) {
(file);
},
beforeRemove(file, fileList) {
return this.$confirm(`Confirm to remove ${ }？`);
}
ElementUI batch upload and download precautions
Upload files manually in batches and submit them together with form data
The key hooks in the el-upload component, other omitted
multiple:auto-upload = "false":file-list = "fileList"-
:on-change = "selectFile"(It passes the uploaded fileList to the custom one)
Click Upload to upload multiple files and form data together
a. Define FormData and fill form data and files into FormData
b. Custom request header, Content-type: ‘multipart/form-data’
let formData = new FormData()
for(let key in data){
if(data[key]){
(key,data[key])
}
}
((element,i) =>{
('fileList',)
})
let rs = await axios({
method:'post',
url: + '/sp/addSp',
data: formData,
headers:{
'Content-type':'multipart/form-data'
}
})Upload the file in the table, the component hook function comes with its own parameters
<el-upload
class="upload-demo"
action="/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">Click to upload</el-button>
<div slot="tip" class="el-upload__tip">Uploadable onlyjpg/pngdocument，And not more than500kb</div>
</el-upload>
beforeRemove（file,fileList,index）{
(index)
}Batch download (the background does not return the compressed package, the front end will download it one by one)
download(val){
let vals = (',') //The file identifier array returned by the background ((element) =>{
const iframe = ("iframe");
= "none";
= 0;
= +'Download path'+element;
(iframe);
setTimeout(()=>{
();
}, 1000)
})
}The above is personal experience. I hope you can give you a reference and I hope you can support me more.