el-upload 显示上传文件进度
时间: 2023-11-23 18:57:43 浏览: 48
el-upload组件可以通过自定义上传的实现来显示上传文件的进度。你可以使用axios库来发送上传请求,并在请求中监听上传进度。以下是一个示例代码:
```vue
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-progress="handleUploadProgress"
:http-request="customUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
import axios from 'axios';
export default {
methods: {
handleUploadProgress(event, file, fileList) {
// 处理上传进度
console.log('上传进度:', event.percent);
},
customUpload(file) {
// 自定义上传实现
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('file', file);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
// 监听上传进度
this.handleUploadProgress(progressEvent, file);
}
}).then(response => {
// 上传成功
resolve(response.data);
}).catch(error => {
// 上传失败
reject(error);
});
});
}
}
}
</script>
```
在上述代码中,我们使用了el-upload组件,并通过设置`on-progress`属性来监听上传进度。在`customUpload`方法中,我们使用axios库发送上传请求,并在请求中设置`onUploadProgress`回调函数来监听上传进度。通过调用`handleUploadProgress`方法来处理上传进度。