ant design中upload组件上传大文件,显示进度条进度的实例


Posted in Javascript onOctober 29, 2020

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/*代表了全部的图片文件,如果可能的话,尽量少写两个。速度自然就快了。

不过第一次好像还是会慢点的,不过不会像以前一样,每次都要等。

以上这篇ant design中upload组件上传大文件,显示进度条进度的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
写一个Vue loading 插件
Nov 09 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 #Javascript
node.js爬虫框架node-crawler初体验
Oct 29 #Javascript
JavaScript实现网页计算器功能
Oct 29 #Javascript
Javascript数组及类数组相关原理详解
Oct 29 #Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 #Javascript
node.js如何操作MySQL数据库
Oct 29 #Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 #Javascript
You might like
Session保存到数据库的php类分享
2011/10/24 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
深入浅析python继承问题
2016/05/29 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
python GUI模拟实现计算器
2020/06/22 Python
在keras里实现自定义上采样层
2020/06/28 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
如何用python免费看美剧
2020/08/11 Python
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
公证委托书大全
2014/04/04 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
最常使用的求职信
2014/05/25 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
毕业典礼致辞
2015/07/29 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
高二英语教学反思
2016/03/03 职场文书