el-upload清空已上传的文件列表_el-upload clearfiles

vue3 elementUIplus el-upload上传队列清空

clearFiles()清空已上传的文件列表（该方法不支持在 before-upload 中调用）

最近写需求用到el-upload组件手动上传文件，清空上传队列时花了好久，写一篇笔记记录一下

在vue中给el-upload绑定ref属性；
手动上传文件

<el-upload
    ref="uploadFile"
    class="uploader"
    :limit="1"
    :on-exceed="handleExceed"
    :auto-upload="false"
    @change="handelUpload($event)"
>
    <el-button plain :loading="btnLoading">上传JSON</el-button>
</el-upload>

<el-button plain :click="handelClear">清空上传队列</el-button>
1
2
3
4
5
6
7
8
9
10
11
12

在script中调用el-upload外部函数clearFiles()

import { ElMessage, genFileId } from 'element-plus';
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
// 声明el-upload中绑定的ref="uploadFile"属性
const uploadFile = ref<UploadInstance>();
// 当超出限制时，执行的钩子函数
const handleExceed: UploadProps['onExceed'] = files => {
    uploadFile.value!.clearFiles();
    const file = files[0] as UploadRawFile;
    file.uid = genFileId();
    uploadFile.value!.handleStart(file);
};
// 手动上传文件
const handelUpload = (file: FormDataFile) => {
    const files = file.raw;
    if (!/\.(txt)$/i.test(files.name)) {
        ElMessage.warning('文件类型必须是.txt中的一种,请重新上传');
        return;
    }
    const formJSONParams:any = new FormData();
    formJSONParams.append('file', files);
    // 接口请求处理
};
const handelClear = () => {
    //调用el-upload外部函数
    // 在合适的地方调用，这是一个例子
	upload.value!.clearFiles()
};
return {
	uploadFile,
	handleExceed,
	handelUpload,
	handelClear,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33