您的位置：首页 > 编程技术 > js  >  ant design中upload组件上传大文件,显示进度条进度的实例

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

 更新时间：2020年10月29日 18:39  点击：3449

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组件上传大文件,显示进度条进度的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • php读取zip文件(删除文件,提取文件,增加文件)实例

    下面小编来给大家演示几个php操作zip文件的实例，我们可以读取zip包中指定文件与删除zip包中指定文件，下面来给大这介绍一下。 从zip压缩文件中提取文件 代...2016-11-25

  • Jupyter Notebook读取csv文件出现的问题及解决

    这篇文章主要介绍了JupyterNotebook读取csv文件出现的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2023-01-06

  • Photoshop打开PSD文件空白怎么解决

    有时我们接受或下载到的PSD文件打开是空白的，那么我们要如何来解决这个 问题了，下面一聚教程小伙伴就为各位介绍Photoshop打开PSD文件空白解决办法。 1、如我们打开...2016-09-14

  • 解决python 使用openpyxl读写大文件的坑

    这篇文章主要介绍了解决python 使用openpyxl读写大文件的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-13

  • C#实现HTTP下载文件的方法

    这篇文章主要介绍了C#实现HTTP下载文件的方法,包括了HTTP通信的创建、本地文件的写入等,非常具有实用价值,需要的朋友可以参考下...2020-06-25

  • SpringBoot实现excel文件生成和下载

    这篇文章主要为大家详细介绍了SpringBoot实现excel文件生成和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-02-09

  • C#操作本地文件及保存文件到数据库的基本方法总结

    C#使用System.IO中的文件操作方法在Windows系统中处理本地文件相当顺手,这里我们还总结了在Oracle中保存文件的方法,嗯,接下来就来看看整理的C#操作本地文件及保存文件到数据库的基本方法总结...2020-06-25

  • php无刷新利用iframe实现页面无刷新上传文件(1/2)

    利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数，该参数为从客户端获取的$_files变量，返回重新命名后的文件名，如果上传失...2016-11-25

  • 使用Vant完成通知栏Notify的提示操作

    这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-11

  • php批量替换内容或指定目录下所有文件内容

    要替换字符串中的内容我们只要利用php相关函数，如strstr,str_replace,正则表达式了，那么我们要替换目录所有文件的内容就需要先遍历目录再打开文件再利用上面讲的函数替...2016-11-25

  • PHP文件上传一些小收获

    又码了一个周末的代码，这次在做一些关于文件上传的东西。（PHP UPLOAD）小有收获项目是一个BT种子列表，用户有权限上传自己的种子，然后配合BT TRACK服务器把种子的信息写出来...2016-11-25

  • Zend studio文件注释模板设置方法

    步骤：Window -> PHP -> Editor -> Templates，这里可以设置（增、删、改、导入等）管理你的模板。新建文件注释、函数注释、代码块等模板的实例新建模板，分别输入Name、Description、Patterna)文件注释Name: 3cfileDescriptio...2013-10-04

  • AI源文件转photoshop图像变模糊问题解决教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说下AI源文件转photoshop图像变模糊问题的解决教程，各位想知道具体解决方法的使用者们，那么下面就快来跟着小编...2016-09-14

  • C++万能库头文件在vs中的安装步骤(图文)

    这篇文章主要介绍了C++万能库头文件在vs中的安装步骤(图文)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-23

  • php文件上传你必须知道的几点

    本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项，下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21

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

    这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29

  • C#使用StreamWriter写入文件的方法

    这篇文章主要介绍了C#使用StreamWriter写入文件的方法,涉及C#中StreamWriter类操作文件的相关技巧,需要的朋友可以参考下...2020-06-25

  • php实现文件下载实例分享

    举一个案例：复制代码 代码如下:<?phpclass Downfile { function downserver($file_name){$file_path = "./img/".$file_name;//转码，文件名转为gb2312解决中文乱码$file_name = iconv("utf-8","gb2312",$file_name...2014-06-07

  • C#路径,文件,目录及IO常见操作汇总

    这篇文章主要介绍了C#路径,文件,目录及IO常见操作,较为详细的分析并汇总了C#关于路径,文件,目录及IO常见操作,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • 查找php配置文件php.ini所在路径的二种方法

    通常php.ini的位置在：复制代码 代码如下:/etc目录下或/usr/local/lib目录下。如果你还是找不到php.ini或者找到了php.ini修改后不生效(其实是没找对)，请使用如下办法：1.新建php文件，写入如下代码复制代码 代码如下:<?phpe...2014-05-31