ant design中upload组件上传大文件,显示进度条进度的实例
作者:祁沐白神 时间:2024-04-27 16:08:46
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>
注意点:
重要的是上面注释掉的:accept:想象一下,你如果给电脑很多筛选条件的话自然就慢了,image/*代表了全部的图片文件,如果可能的话,尽量少写两个。速度自然就快了。
不过第一次好像还是会慢点的,不过不会像以前一样,每次都要等。
来源:https://blog.csdn.net/qq_40313245/article/details/91044686
标签:ant,design,upload,文件,进度条
0
投稿
猜你喜欢
Python reduce函数作用及实例解析
2023-10-10 22:27:47
Python中赋值的含义及说明
2023-01-05 23:11:38
Python程序设计入门(3)数组的使用
2023-07-20 07:11:15
Python 获取numpy.array索引值的实例
2021-01-19 21:36:57
深入了解Golang 哈希算法之MD5、SHA-1和SHA-256
2024-05-05 09:34:51
带你熟练掌握Vue3之Pinia状态管理
2024-05-28 15:52:44
Golang源码分析之golang/sync之singleflight
2024-04-25 15:07:26
关于JavaScript数组去重的一些理解汇总
2024-05-02 16:17:56
如何利用Python分析出微信朋友男女统计图
2021-12-03 15:46:09
处理及遍历XML文档DOM元素属性及方法整理
2024-05-13 10:39:38
分析Python读取文件时的路径问题
2022-03-24 10:22:48
python中字典增加和删除使用方法
2023-12-15 15:31:30
Python画图高斯分布的示例
2023-02-07 09:09:14
网页模式化窗口
2008-04-27 20:52:00
Python 实现数据库(SQL)更新脚本的生成方法
2024-01-16 21:01:18
pyecharts绘制时间轮播图柱形图+饼图+玫瑰图+折线图
2022-01-18 13:19:47
Python使用MD5加密算法对字符串进行加密操作示例
2021-06-23 16:30:25
SQL Server中通过reverse取某个最后一次出现的符号后面的内容(字符串反转)
2012-07-11 15:59:36
Python判断telnet通不通的实例
2023-07-27 14:56:08
实例:ASP与ACCESS链接
2008-11-21 16:10:00