The submit() does not take effect when the before-upload method of el-upload in vue2.0 element-ui returns false

Reprinted: https://blog.csdn.net/sunday_tutu/article/details/82018037

The function I want to achieve is to check whether there is duplicate data in the table before uploading the file. If there is, a pop-up window prompts whether to overwrite it. After confirming, the upload will continue. After canceling, the upload will not be uploaded again.
The element-ui used in the project is V1.4.3

1. <el-upload

2. class="upload-demo" drag

3. ref="fileUpload"

4. :action="urls.fileUpload"

5. :on-success="handleUploadSuccess"

6. :on-error="handleUploadError"

7. :on-progress="progressUpload"

8. :before-upload="beforeUpload"

9. show-file-list

10. multiple>

11. <i class="el-icon-upload"></i>

12. <div class="el-upload__text">点击上传，或者拖拽到这里</div>

13. </el-upload>

In the code, I return the before-upload method to false, and then after clicking confirm, call _this.$refs.fileUpload.submit(); but after clicking OK, the file is still not uploaded. There is a second problem, which is to cancel When _this.$refs.fileUpload.clearFiles(); I called the clearFiles() method, this method will empty the file list, I only want to delete the file I cancelled at that time.
I went to look at the element-ui source code later and found that if the before-upload method returns false, the submit() method will be intercepted. The source code is as follows:

 

In the source code, the post method in the child component is finally called. If you don’t know which child component you can print out _this.$refs.fileUpload.$children

So I replaced these two sentences with the following two sentences:

Continue uploading: _this.$refs.fileUpload.$children[0].post(file);
delete the file in the file list when canceling: _this.$refs.fileUpload.handleRemove(file);

 

const file = this.$refs.enterUpload.fileList[0].raw

this.$refs.enterUpload.$children[0].post(file);