在 `
ant-design-vue` 的 `
Upload`
组件中，`on
Progress` 事件用于监听文件
上传过程中的进度变化。该事件通常与自定义
上传逻辑结合
使用（例如通过 `customRequest` 属性指定
上传方法），以便在
上传过程中获取实时的进度信息。
以下是一个典型的用法示例：
### 示例代码
```vue
<template>
<a
-upload
:customRequest="customRequest"
:on
Progress="handle
Progress"
:onChange="handleChange"
>
<a
-button>点击
上传</a
-button>
</a
-upload>
</template>
<script>
import axios from 'axios';
export default {
methods: {
handleChange(info) {
console.log('
上传状态变化:', info);
},
handle
Progress(
progress, file) {
console.log(`文件 ${file.name}
上传进度: ${
progress}%`);
},
customRequest({ file, on
Progress, onSuccess, onError }) {
const
formData = new
FormData();
formData.append('file', file);
axios({
url: '/api/
upload',
method: 'POST',
data:
formData,
headers: {
'Content
-Type': 'multipart/
form-data',
},
on
UploadProgress: (ev) => {
if (ev.lengthComputable) {
const percent = Math.round((ev.loaded * 100) / ev.total);
on
Progress(percent, ev); // 触发 on
Progress 事件
}
},
})
.then((res) => {
onSuccess(res.data);
})
.catch((err) => {
onError(err);
});
},
},
};
</script>
```
### 关键点说明
- **`on
Progress` 回调函数**：接收两个参数，一个是当前
上传进度百分比（`
progress`），另一个是文件对象（`file`）。
- **`customRequest` 自定义
上传方法**：必须手动配置 `on
UploadProgress` 来计算并传递
上传进度值。
- **`axios` 中的 `on
UploadProgress`**：用于监听
上传事件，并通过 `Math.round((ev.loaded * 100) / ev.total)` 计算出
上传进度百分比[^2]。
### 进度条显示建议
为了在界面上展示
上传进度条，可以结合 `a
-progress`
组件来实现动态更新效果：
```vue
<template>
<div>
<a
-progress :percent="
uploadPercent" />
<a
-upload
:customRequest="customRequest"
:on
Progress="handle
Progress"
>
<a
-button>点击
上传</a
-button>
</a
-upload>
</div>
</template>
<script>
export default {
data() {
return {
uploadPercent: 0,
};
},
methods: {
handle
Progress(
progress, file) {
this.
uploadPercent =
progress;
},
customRequest({ file, on
Progress, onSuccess, onError }) {
const
formData = new
FormData();
formData.append('file', file);
axios({
url: '/api/
upload',
method: 'POST',
data:
formData,
headers: { 'Content
-Type': 'multipart/
form-data' },
on
UploadProgress: (ev) => {
if (ev.lengthComputable) {
const percent = Math.round((ev.loaded * 100) / ev.total);
on
Progress(percent, ev);
}
},
})
.then((res) => {
onSuccess(res.data);
})
.catch((err) => {
onError(err);
});
},
},
};
</script>
```
通过这种方式，可以在用户界面中清晰地展示文件
上传的进度状态。
本文描述了前端上传图片后，如何正确地在form表单提交时使用后台返回的图片地址，避免本地地址被误传的问题。关键在于调整formItem的结构，确保仅upload组件包含在内。
扫一扫
1631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
