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组件实现上传大文件时显示进度条进度问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。