How to batch upload the Upload component in ElementUI
First of all, the upload component
<el-upload
class="upload-demo"
ref="uploadFile"
name="filedatas"
:headers="importHeaders"
:action="uploadAdminHost"
:auto-upload="false"
multiple
>
<el-button slot="trigger" size="small" type="primary">Select a blog file</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Submit to the server</el-button>
</el-upload>Then there is the upload logic, first get the dom on the upload component, then get the file, upload address and data
// File upload submitUpload() {
let {uploadFiles, action, data} = this.$
({
uploadFiles,
data,
action,
success: (response) => {
(response)
// After the upload is successful, delete the contents inside this.$();
this.$();
},
error: (error) => {
('Failed', error)
}
})
},The following is encapsulated with a uploadFiles method. Here, uploadFiles can be multiple files, and the ajax method is encapsulated
/**
* Custom upload files
* @param fileList file list
* @param data Additional parameters included when uploading
* @param url Uploaded URL address
* @param success callback
* @param error Failed callback
*/
uploadFiles({uploadFiles, headers, data, action, success, error}) {
let form = new FormData()
// File object (file => ("filedatas", ))
// Attachment parameters for (let key in data) {
(key, data[key])
}
let xhr = new XMLHttpRequest()
// Asynchronous request ("post", action, true)
// Set request header ("Authorization", getToken());
= function() {
if ( == 4){
if (( >= 200 && < 300) || == 304){
success && success()
} else {
error && error()
}
}
}
(form)
}The last backend interface accepts multiple files at the same time
@PostMapping("/pictures")
public Object uploadPics(HttpServletRequest request, List<MultipartFile> filedatas) {
// Logical code }Finally, check the request, multiple files will be carried at the same time and multiple uploaded results will be returned.
This is the article about how to batch upload the Upload component in Vue ElementUI. For more related content related to batch upload of the Vue ElementUI Upload component, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!