Vue3 el-upload clearFiles
时间: 2024-06-01 19:06:53 浏览: 20
Vue3 el-upload 是一个基于 ElementUI 的文件上传组件,clearFiles 是该组件的一个方法,用于清空已上传的文件列表。
当你需要在上传文件后清空文件列表时,可以调用 clearFiles 方法。该方法将会清空已上传的文件列表,并重置组件状态,以便用户可以再次上传文件。
例如,在 Vue3 中使用 el-upload 组件并且需要在上传文件后清空文件列表,可以在上传成功后调用 clearFiles 方法,示例代码如下:
```
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleUploadSuccess"
:file-list="fileList">
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button slot="clear" type="danger" @click="clearFiles">清空文件</el-button>
</el-upload>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const fileList = ref([]);
const handleUploadSuccess = (response, file) => {
fileList.value.push(file);
// 上传成功后清空文件列表
clearFiles();
};
const clearFiles = () => {
fileList.value = [];
};
return {
fileList,
handleUploadSuccess,
clearFiles,
};
},
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)