element upload axios自定义上传 仍能实现action的进度效果
时间: 2024-01-27 15:04:16 浏览: 32
可以实现。在使用 element upload 和 axios 自定义上传时,可以通过监听 axios 的上传进度事件来更新 element upload 的进度条。具体实现步骤如下:
1. 在 element upload 中,将 show-file-list 属性设置为 false,禁止显示上传文件列表,原因是自定义上传时不需要 element upload 自己去上传文件。
2. 在 element upload 的 before-upload 方法中,将文件上传到服务器。在上传过程中,监听 axios 的上传进度事件,更新 element upload 的进度条。
示例代码如下:
```html
<el-upload
:show-file-list="false"
:on-preview="handlePreview"
:before-upload="handleUpload">
<el-button>点击上传</el-button>
</el-upload>
```
```javascript
handleUpload(file) {
const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData, {
onUploadProgress: progressEvent => {
// 更新 element upload 的进度条
this.$refs.upload.uploadFiles.forEach(item => {
if (item.raw === file) {
item.percentage = (progressEvent.loaded / progressEvent.total) * 100;
}
});
}
}).then(response => {
// 上传成功
}).catch(error => {
// 上传失败
});
}
```
在上面的示例代码中,我们在 axios 的 post 请求中通过 onUploadProgress 监听上传进度事件,并更新 element upload 中对应文件的进度条。注意,在更新进度条时,需要通过 this.$refs.upload.uploadFiles 来获取 element upload 中已经添加的文件列表,并找到对应文件来更新进度条。
这样就可以在使用 element upload 和 axios 自定义上传时,仍能实现 action 的进度效果了。