antdesign中upload组件上传⼤⽂件，显⽰进度条进度的实
前端大文件上传解决方案例
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: { ... }
}
*/
}
}
<Upload {...uploadAttachmentsProps}>
<a style={{marginRight: '10px'}}><Icon type="plus"></Icon>添加</a>
</Upload>
进度条我们需要回调⾥的 event，
const event = info.event
if (event) { // ⼀定要加判断，不然会报错
let percent = Math.floor((event.loaded / al) * 100)
this.setState({percent: percent})
console.log(percent) // percent就是进度条的数值
}
进度条组件：
<Progress percent={this.state.percent} />
补充知识：ant design (antd) Upload 点击上传图⽚反应过慢
每次点击上传的时候，要等半年，才能出来选择⽂件框，有的时候，还会出来俩次，⽐较恶⼼，其实是电脑去本地搜索⽂件啥的，过滤的时间
const props = {
action: this.state.action,
fileList: fileList,
data: {
appid: appid,
secret: secret,
},
headers: {'X-Requested-With': null},
// accept: "image/*",
accept: "image/jpg,image/jpeg,image/png,image/bmp",
onChange: this.handleChange,
beforeUpload: this.beforeUpload,
onPreview: this.handlePreview,
listType: "picture-card",
};
<Upload {...props}>
{fileList.length >= this.state.length ? null : uploadButton}
</Upload>
注意点：
重要的是上⾯注释掉的：accept：想象⼀下，你如果给电脑很多筛选条件的话⾃然就慢了，image/*代表了全部的图⽚⽂件，如果可能的话，尽量少写两个。速度⾃然就快了。
不过第⼀次好像还是会慢点的，不过不会像以前⼀样，每次都要等。
以上这篇ant design中upload组件上传⼤⽂件，显⽰进度条进度的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。