ant design中upload组件上传大文件,显示进度条进度的实例
Upload组件是自带上传进度，但是样式调起来很麻烦，我们要做的就是自定义一个
首先页面要引入组件Upload，Progress
uploadAttachmentsProps={
action:`/api/upload`,
showUploadList:false,//这里关闭自带的列表
beforeUpload:(info)=>{
/*上传前的钩子，可以用来判断类型，和大小
if('是否符合类型'){
returnfalse
}
if('是否符合类型'){
returnfalse
}
returntrue
*/
}，
onChange:(info)=>{
console.log(info)
/*
回调有三个参数
{
file:{...},
fileList:[...],
event:{...}
}
*/
}
}
添加
进度条我们需要回调里的event，
constevent=info.event
if(event){//一定要加判断，不然会报错
letpercent=Math.floor((event.loaded/event.total)*100)
this.setState({percent:percent})
console.log(percent)//percent就是进度条的数值
}
进度条组件：
补充知识：antdesign(antd)Upload点击上传图片反应过慢
每次点击上传的时候，要等半年，才能出来选择文件框，有的时候，还会出来俩次，比较恶心，其实是电脑去本地搜索文件啥的，过滤的时间
constprops={
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",
};
{fileList.length>=this.state.length?null:uploadButton}
注意点：
重要的是上面注释掉的：accept：想象一下，你如果给电脑很多筛选条件的话自然就慢了，image/*代表了全部的图片文件，如果可能的话，尽量少写两个。速度自然就快了。
不过第一次好像还是会慢点的，不过不会像以前一样，每次都要等。
以上这篇antdesign中upload组件上传大文件,显示进度条进度的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。