el-upload上传多个文件提交保存后怎么清空文件vue2
时间: 2023-12-01 12:50:49 浏览: 43
在 el-upload 组件上传多个文件并提交保存后,可以通过以下步骤清空已上传的文件:
1. 在 el-upload 组件上添加 ref 属性,例如:`<el-upload ref="upload"></el-upload>`
2. 在保存成功后,通过 `this.$refs.upload.clearFiles()` 方法清空已上传的文件。
完整示例代码如下:
```html
<template>
<el-upload
ref="upload"
action="/upload"
multiple
:on-success="handleSuccess"
>
<el-button slot="trigger">选择文件</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
// 提交保存成功后清空已上传的文件
this.$refs.upload.clearFiles();
}
}
};
</script>
```
注意:`clearFiles()` 方法只会清空已上传的文件,而不会清空待上传的文件队列。如果需要同时清空待上传的文件队列,可以使用 `clearQueue()` 方法。
相关问题
vue中el-upload上传多个文件
在 Vue 中使用 `el-upload` 组件上传多个文件,可以通过设置 `multiple` 属性来实现。例如:
```html
<el-upload
class="upload-demo"
action="/upload"
:multiple="true"
:on-success="handleSuccess"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
在上面的代码中,通过 `:multiple="true"` 设置为可以上传多个文件。同时,`file-list` 属性可以绑定一个数组,用于存储上传的文件列表。在 `submitUpload` 方法中,可以通过调用 `upload` 方法来上传文件,如下所示:
```javascript
methods: {
submitUpload() {
this.$refs.upload.upload();
},
handleSuccess(res, file) {
console.log(res, file);
}
}
```
在 `handleSuccess` 方法中,可以处理上传成功后的响应。
实现el-upload上传多个文件及预览效果代码
可以使用el-upload组件的Multiple选项来实现上传多个文件,同时可以设置List-type为'picture-card'来预览上传的图片,具体代码示例如下:
<el-upload
class="upload-demo"
action="/upload"
:headers="{ 'Authorization': 'Bearer ' + token }"
:multiple="true"
:list-type="'picture-card'"
:auto-upload="false"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload">
<i class="el-icon-plus"></i>
</el-upload>
其中,handlePreview、handleRemove、handleUploadSuccess、beforeUpload分别是上传前、上传成功、预览、删除等相应操作的处理函数,需要在Vue实例中定义。