Introduction:
CustomizeUpload the file and submit it to the background with other parameters (Mainly use axios)
1. Briefly introduce the properties of the component (upload) (just skip if you are familiar with the parameters)
Summarize the use of electroUI and the role of commonly used properties.
limit: limits the number of uploaded files. If you upload a single file, set 1 here, and don't set multiple files.
auto-upload: Automatic upload, in my opinion, unless the file is uploaded separately,
This attribute is only useful because individual files are uploaded directly to the background server.
If we want to obtain the files and other form data in the component ourselves and then upload them, we need other methods, which will be discussed below.action: This property is the address of the upload file. When we specify the auto-upload property,
The component will automatically submit it according to the action address. I usually don't set this property: action="none",
Because I think customization is better and scalable.multiple: This property supports multiple file uploads. If you upload a flyer file, this property is set at will. If you have multiple files, you need to set it. Therefore, it is recommended not to move it because it is enabled by default.
accept: I won’t go into details about this. The types are restricted, of course, only the types when selecting them. If the user wants to upload other types of files, there is still a way.
2. Main purpose custom upload files
2.1 Component Code
<el-upload class="upload"
ref="upload"
action="string"
:file-list="fileList" //Storing selected files :auto-upload="false" //Cancel automatic upload :http-request="uploadFile" Custom upload method
:on-change="handleChange" //How to execute after file selection :on-preview="handlePreview" //Click to display the file (it's useless) :on-remove="handleRemove" //Remove file multiple="multiple">
<el-button slot="trigger"
size="small"
type="primary"
@click="delFile">Select a file</el-button>
</el-upload>
2.2 Properties in data
data(){
return{
// Properties bound by the el-upload component - :file-list="fileList". After rendering, fileList[index] is the Object type, not the File type required in the background. // This component has stored the corresponding File type in the fileList[index].raw property, just use it directly. fileList: [],
// Multiple selection is not supported multiple: false,
formData: "",
}
}
2.3 Methods
//Click on the additional event triggered by uploading the file and clear the fileList delFile () {
= [];
},
handleChange (file, fileList) {
= fileList;
// (, "sb");
},
//Customize upload files uploadFile (file) {
("file", );
// (, "sb2");
},
//Delete the file handleRemove (file, fileList) {
(file, fileList);
},
// Click on the file handlePreview (file) {
(file);
},
3. Submit it to the background with other parameters through axios
Here, you need to use FormData() to store the file before submitting it to the background
Specific implementation method:
//Prepare a submit button<el-button type="primary"
@click="onSubmit">save</el-button>
Submit Events:
//Save button onSubmit () {
let formData = new FormData();
("file", [0].raw);//Get the file that exists in fileList and store it in formData //The following data is the data I set myself, and you can add data to formData by yourself (storage using key-value pairs) ("title", );
axios asynchronous commit:
Note: Only post requests can be used when submitting files using FormData.
"Content-Type" needs to be set in the post request body:
"multipart/form-data;charset=utf-8", reminds the background data is of FormData type
(postThe specific path to request, formData, {
"Content-Type": "multipart/form-data;charset=utf-8"
})
.then(res => {
if ( === "SUCCESS") {
this.$notify({
title: 'success',
message: 'Submission is successful',
type: 'success',
duration: 1000
});
}
})
Received of last background data
Note: The front-end transmits FormData data. To get the file, use @RequestParam (the key stored in formData in the front-end)
MultipartFile file for receiving
//Use PostMapping @PostMapping(Specific path)
public String saveVue(String title,@RequestParam("file") MultipartFile file) throws IOException {
//Get the specific file return "SUCCESS";
}
After all, the custom upload function of elmentui is basically completed!
Summarize
This is the end of this article about the implementation of elementUI custom upload file function. For more related elementUI custom upload file content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!