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 相关文章推荐
表单提交验证类
Jul 14 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
jquery easyui使用心得
Jul 07 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 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
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python读写ini文件的方法
2015/05/28 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
为什么要做架构设计
2015/07/08 面试题
过滤器的用法
2013/10/08 面试题
大学毕业感言200字
2014/03/09 职场文书
优质服务口号
2014/06/11 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
安全月宣传标语
2014/10/07 职场文书
担保贷款承诺书
2015/04/30 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
简单介绍Python的第三方库yaml
2021/06/18 Python