ant design使用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 / event.total) * 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>
关于ant design使用upload组件实现上传大文件时显示进度条进度问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。