This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

The el-upload file still appears in the list after an upload failure. This failure is defined as a file parsing error, not a component or network problem

This PDF file failed to upload, but it still shows in the list, giving the impression that it was uploaded successfully, so we remove it, the following code:

<el-upload class="upload-file padding" ref="uploadFile" multiple accept="image/jpeg,image/png,image/gif,application/pdf"  :http-request="uploadFile" :on-change="onChange" :before-upload="beforeuploadFile" action="123" :disabled="! isDisabled" :on-remove="handleRemove" :file-list="ruleForm.commission"> <el-button type="primary" size="mini" :loading="uploadLoding" :disabled="! </el-button> <div slot="tip" class="el-upload__tip" style=" word-break: break-all; margin: 0 0 10px;" </div> </el-upload> <script> // Remove handleRemove (file, This.ruleform.filelist) {this.ruleform.mission = fileList // this.ruleform.filename = ''}, // Upload file changes when the hook, The important thing to note here is that there are several different file states that change during upload, OnChange (file, fileList) {this.files = fileList}, UploadFile (fileObj) {let file = fileObj. File uploadImageInfo({file: file, width: 165, height: 255) 245, caseId: this.caseId, taskId: This.taskid}). Then (res => {if (res.success && res.data) {// todo const obj = {name: 'filenames. PDF ', // file name with suffix URL: data.path, / / file path} this.ruleForm.com mission. Push (obj) / / show}}). The catch (err = > {the console. The log (err) let uid = file. The uid/code/key role, Remove the file list fail let independence idx = this. $refs. UploadFile. UploadFiles. FindIndex (item = > item. The uid = = = uid) / / key code, Remove the file list of failure (uploadFiles for el - the ref value of the upload) enclosing $refs. UploadFile. UploadFiles. Splice (independence idx, 1) / / key code, })} </script>Copy the code

Follow the above code to remove the failed file perfectly, the most critical line of the code:

this.$refs.uploadFile.uploadFiles.splice(idx, 1)

Summary: I didn’t see anything in the official documentation, because the fileList list is not the one I want to display when I assign data

Supplementary knowledge:

Element uploads the official PAI document of the change event

There are also three states that the change event will be triggered in the document: file addition, successful upload and failed upload will be triggered.

handleUploadChange: function(info) { const file = info.file; If (file.status === 'uploading') {console.log(' uploading a file ', info); } else if (file.status === 'error') {this.$notification.error({message: 'error', description: JSON.stringify(info) }); } else if (file.status === 'done') {console.log(' upload completed ', info); Const response = file.response; const response = file.response; If (response.success) {if (response.data.status == 1) {console.log(' dump succeeded '); }else if (response.data.status == 2) {console.log(' done '); }else{console.log(' dump failed '); }} else {this.$notification.error({message: 'upload failed ', description: response.msg}); }Copy the code