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

 更新时间:2020年10月29日 15:13:55   作者:祁沐白神  
这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

相关文章

  • 使用vue-touch报priority错误的解决

    使用vue-touch报priority错误的解决

    这篇文章主要介绍了使用vue-touch报priority错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 使用imba.io框架得到比 vue 快50倍的性能基准

    使用imba.io框架得到比 vue 快50倍的性能基准

    imba 是一种新的编程语言,可以编译为高性能的 JavaScript。可以直接用于 Web 编程(服务端与客户端)开发。这篇文章主要介绍了使用imba.io框架,得到比 vue 快50倍的性能基准,需要的朋友可以参考下
    2019-06-06
  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    这篇文章主要介绍了Vue+elementUI的动态表单的校验(根据条件动态切换校验格式),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 如何根据业务封装自己的功能组件

    如何根据业务封装自己的功能组件

    这篇文章主要介绍了Vue封装功能组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue slot用法(小结)

    Vue slot用法(小结)

    这篇文章主要介绍了Vue slot用法(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 使用vue-cli4.0快速搭建一个项目的方法步骤

    使用vue-cli4.0快速搭建一个项目的方法步骤

    这篇文章主要介绍了使用vue-cli4.0快速搭建一个项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Vue中的computed属性详解

    Vue中的computed属性详解

    这篇文章主要为大家介绍了Vue中的computed属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • Vue.set()和this.$set()使用和区别

    Vue.set()和this.$set()使用和区别

    我们发现Vue.set()和this.$set()这两个api的实现原理基本一模一样,那么Vue.set()和this.$set()的区别是什么,本文详细的介绍一下,感兴趣的可以了解一下
    2021-06-06
  • vue实现的树形结构加多选框示例

    vue实现的树形结构加多选框示例

    这篇文章主要介绍了vue实现的树形结构加多选框,结合实例形式分析了在之前递归组件实现vue树形结构的基础之上再加上多选框功能相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 关于vue的路由模式及修改方法

    关于vue的路由模式及修改方法

    这篇文章主要介绍了关于vue的路由模式及修改方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论