Vue.js + Element-ui 上传：如何调用ClearFiles或Abort方法

Question

我正在使用 vue.js 和 element-ui。

我想使用 upload-file 组件将文件发送到我的服务器。

如果文件已经存在，我想停止将文件加载到服务器。我想使用声称的方法 abort 或 clearFiles，但不能。我的错误是什么？

HTML

<el-upload
     action="",
     :http-request="addAttachment",
     :on-remove="deleteAttachment",
     :before-upload="handleBeforeUpload",
     :file-list="fileList">
</el-upload>
<el-button size="small" type="success" @click="clearFiles">clear</el-button>

JAVASCRIPT

var vm = new Vue({
    data() {
        return {
            fileList: []
        };
    },
    methods: {
        handleBeforeUpload(file) {
            //if loading file exists in fileList - abort 
            if (findIndexInFileList(file) >= 0) {
                clearFiles(); //error
                this.clearFiles(); //.. and error
                vm.clearFiles(); //.. and also error
            }
        }
    }
}).$mount('#app');

vm.clearFiles(); //error!

Answer 1

有参考！将 ref 属性添加到 el-upload

<el-upload
 ref="upload">
</el-upload>

然后通过 $refs 对象调用

this.$refs.upload.clearFiles()

Vue.js + Element-ui 上传：如何调用ClearFiles或Abort方法

Vue.js + Element-ui Upload: how call method ClearFiles or Abort

javascript

upload

vuejs2

element-ui