使用el-upload组件,一旦上传进度达到100%,就执行某个方法
时间: 2024-01-06 12:06:44 浏览: 82
可以通过监听 el-upload 组件的 `on-success` 事件来实现上传完成后执行某个方法的逻辑。具体实现步骤如下:
1. 在 el-upload 组件上添加 `on-success` 属性,指定一个上传成功后的回调函数,例如:
```html
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleUploadSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
```
2. 在 Vue 实例中定义 `handleUploadSuccess` 方法,例如:
```javascript
methods: {
handleUploadSuccess(response, file, fileList) {
// 上传成功后的处理逻辑
console.log('上传成功');
console.log(response); // 服务器响应内容
console.log(file); // 当前上传的文件
console.log(fileList); // 上传文件列表
}
}
```
在 `handleUploadSuccess` 方法中,你可以根据自己的需求来编写上传成功后的处理逻辑。例如,可以在方法中判断上传进度是否达到 100%,如果是就执行某个方法。
注意:如果上传的是多个文件,`handleUploadSuccess` 方法会在每个文件上传成功后都被调用一次。如果需要在所有文件上传完成后执行某个方法,可以监听 el-upload 组件的 `on-exceed` 事件,判断是否所有文件都已上传完成,然后再执行相应的逻辑。
阅读全文