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 相关文章推荐
jquery 最简单易用的表单验证插件
Feb 27 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
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原理之异常机制深入分析
2010/08/08 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
如何打开php的gd2库
2017/02/09 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
JavaScript的目的分析
2007/01/05 Javascript
js实现DIV的一些简单控制
2007/06/04 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
Javascript中的arguments对象
2016/06/20 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
学习python的前途 python挣钱
2019/02/27 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
python实现图像拼接
2020/03/05 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
公司外出活动方案
2014/08/14 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2014年城管工作总结
2014/11/20 职场文书
银行培训心得体会范文
2016/01/09 职场文书
python基础之错误和异常处理
2021/10/24 Python
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
python中redis包操作数据库的教程
2022/04/19 Python