本文介绍了如何在antd的Upload组件中实现大文件上传并显示自定义进度条。通过设置`beforeUpload`和`onChange`回调，我们可以监控上传进度，并利用Progress组件展示进度信息。关键点包括限制`accept`属性以提高文件选择速度，并在`beforeUpload`中进行预处理。此外，还提到首次加载可能会较慢，但后续速度将得到改善。
Upload组件是自带上传进度，但是样式调起来很麻烦，我们要做的就是自定义一个
首先页面要引入组件 Upload， Progress
uploadAttachmentsProps = {
action: `/api/upload`,
showUploadList: false, // 这里关闭自带的列表
beforeUpload: (info) => {
/* 上传前的钩子，可以用来判断类型，和大小
if ('是否符合类型') {
return false
}
if ('是否符合类型') {
return false
}
return true
*/
}，
onChange: (info) => {
console.log(info)
/*
回调有三个参数
{
file: { ... },
fileList: [ ... ],
event: { ... }
}
*/
}
}
添加
进度条我们需要回调里的 event，
const event = info.event
if (event) { // 一定要加判断，不然会报错
let percent = Math.floor((event.loaded / event.total)
最低0.47元/天 解锁文章
扫一扫
4131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
