element-ui文件上传添加进度条
时间: 2023-08-31 19:04:55 浏览: 65
使用 Element UI 中的上传组件,可以轻松地添加文件上传进度条。以下是一个简单的示例:
首先,在 Vue 组件中导入 Element UI 和 axios:
```javascript
import { Upload, Progress } from 'element-ui';
import axios from 'axios';
```
然后,在模板中添加上传组件和进度条组件:
```html
<template>
<div>
<upload
:action="uploadUrl"
:on-success="handleSuccess"
:on-progress="handleProgress"
:show-file-list="false"
:before-upload="beforeUpload"
>
<el-button>上传文件</el-button>
</upload>
<progress :value="progress" max="100">{{ progress }}%</progress>
</div>
</template>
```
在组件的 data 属性中添加 uploadUrl、progress 变量:
```javascript
data() {
return {
uploadUrl: '/api/upload',
progress: 0,
};
},
```
在 methods 中添加上传成功回调函数 handleSuccess 和上传进度回调函数 handleProgress:
```javascript
methods: {
handleSuccess(res, file) {
console.log('上传成功', res, file);
},
handleProgress(event, file, fileList) {
this.progress = parseInt(event.percent, 10);
},
beforeUpload(file) {
const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
onUploadProgress: (progressEvent) => {
this.progress = parseInt(
Math.round((progressEvent.loaded * 100) / progressEvent.total)
);
},
});
return false;
},
},
```
在 beforeUpload 方法中使用 axios 发送文件上传请求,并监听 onUploadProgress 事件更新进度条。
需要注意的是,上传组件的 show-file-list 属性设置为 false,即不显示已上传的文件列表,如果需要显示,可以设置为 true。