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 相关文章推荐
js防止表单重复提交的两种方法
Sep 30 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
Vue3实现简易音乐播放器组件
Aug 14 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
德生1994机评
2021/03/02 无线电
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
第十四节 命名空间 [14]
2006/10/09 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Python实现搜索算法的实例代码
2020/01/02 Python
python统计字符的个数代码实例
2020/02/07 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
培训心得体会
2013/12/29 职场文书
品质标语大全
2014/06/21 职场文书
教师见习总结范文
2015/06/23 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
文书工作总结(范文)
2019/07/11 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
Python内置的数据类型及使用方法
2022/04/13 Python