Tools: vue+elementUI(upload component)
Requirements: familiar with the uplood components and features of elementUI
The upload of get request file is very simple, just write action and data.
<el-upload ref="upload" action="Your upload address" data="uploadData(You give back-end parameters)" :auto-upload="false"> <el-button slot="trigger" type="primary">Select file</el-button> </el-upload> <el-button type="primary" @click="submitFile">Upload files</el-button>
Note: data only accepts object, which will convert the object to the corresponding parameter splicing string type.
The upload method is the default upload method encapsulated in elementUI, which can be called by the defined method.
submitFile() { this.$refs.upload.submit(); }Post requests multi file upload
FormData is used here. Students who don't know can enter here to learn Details of using FormData
<el-upload ref="upload" action="" :http-request="postUpFile(Custom upload method)" :file-list="fileList" :auto-upload="false" multiple> <el-button slot="trigger" type="primary">Select file</el-button> </el-upload> <el-button type="primary" @click="submitFile">Upload files</el-button>
Note: http request is a custom upload method, but action is required
data() { return { fileList: [], // Selected file array formData: '' // File flow and form parameters to back end }; }, computed: { uploadData: {} }, methods: { postUpFile(param) { // Custom upload method this.formData.append('file', param.file); // Add a file stream to formData }, submitFile() { this.formData = new FormData(); // Customize a new FormData this.$refs.upload.submit(); // Calling the custom upload mode must be called before the interface is transferred. let uploadDataStr = JSON.stringify(this.uploadData); // See the receiving method of the backend. For example: receiving String format this.formData.append('data', uploadDataStr); //Call the interface to transfer this.formData to the background } }
Note: in the user-defined upload method encapsulated by elementUI, multiple files are not added to 'file' together, but added one by one. If you want to put the method calling the interface in this method, please be prepared to click once to call multiple interfaces (here is a big hole! Safety!)
Since then, this article is over. Let's learn from each other. If there are mistakes or better ways, please leave a message. Thank you~
Reference link:
Native formdata attachment and form upload
vue+axios+elementUI file upload and download