el-upload上传多个文件提交保存后怎么清空文件vue2
时间: 2023-12-01 16:13:57 浏览: 92
你可以在上传成功后,通过设置 el-upload 组件的 fileList 属性为空数组来清空已上传的文件。具体实现代码如下:
```vue
<template>
<el-upload
class="upload-demo"
action="your/upload/url"
:on-success="handleSuccess"
:file-list="fileList"
:multiple="true"
>
<el-button slot="trigger">选取文件</el-button>
<el-button slot="upload">上传到服务器</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
}
},
methods: {
handleSuccess(response, file, fileList) {
// 处理上传成功逻辑
// 重置 fileList
this.fileList = []
}
}
}
</script>
```
在上述代码中,我们通过设置 fileList 为空数组来清空已上传的文件。在 handleSuccess 方法中,你可以编写自己的上传成功逻辑,例如展示上传成功的文件列表、保存文件路径等。
相关问题
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` 是 Element UI 提供的一个强大的文件上传组件,它支持单个文件或多文件上传,并且功能丰富,包括预览、拖拽、暂停/继续上传、限制上传大小等。在 Vue.js 中,你可以很容易地将它添加到你的项目中来处理文件上传需求。
以下是 `el-upload` 组件的基本用法:
```html
<template>
<el-upload
:action="uploadUrl"
:multiple="true" // 允许上传多个文件
:limit="5" // 设置最大上传文件数,默认无限制
:file-list="fileList"
:on-change="handleChange" // 文件变化事件
:on-success="handleSuccess" // 上传成功回调
:on-error="handleError" // 上传失败回调
>
<el-button>点击选择文件</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
uploadUrl: 'your-api-url', // 你的服务器接收文件的地址
fileList: [], // 存储已上传文件的信息
};
},
methods: {
handleChange(file) {
console.log('文件改变', file);
},
handleSuccess(response, file) {
this.fileList.push({
name: file.name,
url: response.url, // 返回服务器返回的新文件地址
size: file.size,
});
},
handleError(error, file) {
console.error('上传出错', error, file);
},
},
};
</script>
```
阅读全文
相关推荐















