Upload forms and attachments

Tools: vue+elementUI(upload component)
Requirements: familiar with the uplood components and features of elementUI

Get request file upload

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

Tags: Vue JSON axios

Posted on Wed, 04 Dec 2019 07:45:26 -0500 by davidz