File upload

<el-upload ref="fileUpload" action="https://up-z1.qiniup.com" :auto-upload="false" :data="{ token: qnToken, key: fileKey }" :on-change="changeUploadFile" :on-success="upFileScuccess" :on-remove="removeFile" :file-list="form.fileList" <el-button slot="trigger" size="small" type="primary"> Select file </el-button> </el-upload>Copy the code

Action: The address is changed according to the situation. QnToken: The token required by Qiniu is obtained from the background. FileKey: see below; Limit: limits the number of files.

methods: ChangeUploadFile (file) {const suffix = file.name.split('.') const ext = suffix.splice(suffix.length-1, 1)[0] // Add a timestamp to the file name, Only this. Ensure that the key of the same file fileKey = ` file / ${suffix. Join ('. ')} _ ${new Date (). The getTime ()}. ${ext} ` setTimeout (() = > { Enclosing $refs [' fileUpload]. Submit ()}, 500)}, / / file upload success upFileScuccess (the response, the file) {/ / multiple files in the array, the remaining fields, name, url, Useful when data is displayed! this.form.fileList.push({ name: file.name, url: ${response.key} '})}, ${response.key} '}) FileList) {let url = 'your CDN address /${file.response.key}' console.log(url); For (let I = 0; i < this.form.fileList.length; i++) { if (this.form.fileList[i].url == url) { this.form.fileList.splice(i, 1) } } }, }Copy the code

The echo data

So when you give it to the background, if you fileList it in the format above, you just let it do what you want it to do, so here’s what it does.After requesting data, directly assign a value to a fileList in data.