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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
谈谈node.js中的模块系统
Sep 01 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在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python脚本实现验证码识别
2018/06/07 Python
pandas重新生成索引的方法
2018/11/06 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
简约控的天堂:The Undone
2016/12/21 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
宿舍使用违章电器检讨书
2014/01/12 职场文书
董事长秘书工作职责
2014/06/10 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
总经理司机岗位职责
2015/04/10 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python