antd Upload 文件上传的示例代码

 更新时间:2018年12月14日 14:30:51   作者:Lily_miao  
这篇文章主要介绍了antd Upload 文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1.antd官网Upload组件:

https://ant.design/components/upload-cn/

2.下图是最近开发的上传文档的效果:

3.文件上传的实现:

(1)方法一:antd默认上传。

a:渲染文件上传组件。getPDFURL()方法为实现文件的上传。showUploadList为是否展示 uploadList, true显示,false不显示,其可设为一个对象,用于单独设定 showPreviewIcon 和 showRemoveIcon。type为上传按钮的图标。如下图所示。

{/* 渲染文件上传组件 */}
 <Upload {...this.getPdfURL()} showUploadList={false}>
  <Button>
  <Icon type="upload" /> 上传文件
  </Button>
 </Upload>

b:getPDFURL()方法为实现文件的上传。name是发到后台的文件参数名。action为上传文件的地址。accept是接受上传的文件类型。headers是设置上传的请求头部,IE10 以上有效。onChange是上传文件改变时的状态。代码如下图所示。

下面为代码:

getPdfURL = () =>{
  const _this = this;
  const props = {
   name: 'file',
   action: AjaxUrl + 'data/modelFileUpload.svt?cou_id=' + this.state.cou_id,{/*文件上传接口和需要的传参*/}
   accept:"application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",{/*接受上传的文件类型:此处为.doc格式*/}
   headers: {
    authorization: 'authorization-text',
   },
   onChange(info) {//上传文件改变时的状态
    if (info.file.status !== 'uploading') {
     console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
     message.success(`${info.file.name} 上传成功!`);
     _this.setState({
      pdfUrl:AjaxUrl + info.file.response.url,
      wordName:info.file.response.wordName
     })
 
    } else if (info.file.status === 'error') {
     message.error(`${info.file.name} 上传失败!`);
    }
   },
  };
  return props;
 }

注意:accept可以用于设置接口不同类型的文件类型

(2)方法二:使用customRequest通过覆盖默认的上传行为,自定义自己的上传实现。

a:渲染文件上传组件。accept是接受上传的文件类型。customRequest通过覆盖默认的上传行为,customRequest()方法是自定义自己的上传实现。fileList是已经上传的文件列表(受控)。

<Upload
  accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
  customRequest={this.customRequest}
  beforeUpload = {this.beforeUpload}
  fileList={this.state.fileList}
    >
  <Button>
  <Icon type='upload' />上传
  </Button>
</Upload>

b:customRequest()方法是自定义自己的上传实现。 

customRequest = (option)=> {
   const formData = new FormData();
   const fileUrl = AjaxUrl+"data/fileUpload.svt";
   formData.append('files[]',option.file);
   
   reqwest({ /*官网解释:It's AJAX
      All over again. Includes support
      for xmlHttpRequest, JSONP, CORS,
       and CommonJS Promises A.*/
   url: fileUrl,
   method: 'post',
   processData: false,
   data: formData,
   success: (res) => {
    //res为文件上传成功之后返回的信息,res.responseText为接口返回的值
    let fileInfo = JSON.parse(res.responseText);
    if(res){
    this.setState({
     fileInfo:fileInfo,
     loading: false,
     uploading: false,
     defaultFile:false
    })
    }
    
   },
   error: () => {
    this.setState({
     loading: false,
     uploading: false
    })
    message.error("文件上传失败!");
   },
   });
  }

注意:reqwest其实就是ajax异步请求。更多了解参考: https://www.npmjs.com/package/reqwest

antd的upload组件上传功能踩坑

在初次使用upload组件上传文件时,出现了几个风格各异的bug,因此做一个记录

错误的起源

使用upload组件的自动上传方式,上传到项目后台fdfs接口,结果浏览器报错,报405错误

使用form表单和input元素进行原生JS提交

提交到相同接口,只是报跨域错误,并没有发生405错误

更改接口接收文件

这时决定不使用fdfs接口接收文件,后台同事重新提供一个后台接口。但是出现了新的问题。

新的问题 后台只接收单个文件 不接受数组形式的文件列表

这个应该是后台的原因,但是后台没有找到解决方法,于是从前端使用一个折衷办法,获取filelist后遍历list,重复添加file字段到FormData对象

fileList.forEach((value,index)=>{
 formData.append("file",value)
})

说明:上述内容均是自己在开发过程中总结出来,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript 放大镜 移动镜片效果代码

    JavaScript 放大镜 移动镜片效果代码

    JavaScript 放大镜是我成为前端后写的第一个组件, 从中学到了很多东西. 现在已经过去超过半年, 我希望能在自己仍有印象的时候, 整理和重新思考其中的一些处理方法, 将它改进, 并将这些想法写出来
    2011-05-05
  • JavaScript实现鼠标控制自由移动的窗口

    JavaScript实现鼠标控制自由移动的窗口

    这篇文章主要为大家详细介绍了JavaScript实现鼠标控制自由移动的窗口,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • javascript递归函数定义和用法示例分析

    javascript递归函数定义和用法示例分析

    这篇文章主要介绍了javascript递归函数定义和用法示例分析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 微信小程序实战之轮播图(3)

    微信小程序实战之轮播图(3)

    这篇文章主要为大家详细介绍了微信小程序实战之轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • js实现简单排列组合的方法

    js实现简单排列组合的方法

    这篇文章主要介绍了js实现简单排列组合的方法,可实现数学上排列组合算法功能,涉及JavaScript数组与字符串操作技巧,需要的朋友可以参考下
    2016-01-01
  • webpack3之loader全解析

    webpack3之loader全解析

    这篇文章主要介绍了webpack3之loader全解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • js与jquery获取input输入框中的值实例讲解

    js与jquery获取input输入框中的值实例讲解

    在本篇文章里小编给大家整理了关于js与jquery获取input输入框中的值实例讲解,需要的朋友们可以学习参考下。
    2020-02-02
  • 仿服务器端脚本方式的JS模板实现方法

    仿服务器端脚本方式的JS模板实现方法

    仿服务器端脚本方式的JS模板实现方法...
    2007-04-04
  • uniapp中实现App自动检测版本升级的示例代码

    uniapp中实现App自动检测版本升级的示例代码

    本文主要介绍了uniapp中实现App自动检测版本升级的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • JavaScript程序设计高级算法之动态规划实例分析

    JavaScript程序设计高级算法之动态规划实例分析

    这篇文章主要介绍了JavaScript程序设计高级算法之动态规划,结合实例形式分析了javascript动态规划算法的原理、实现技巧与相关使用注意事项,需要的朋友可以参考下
    2017-11-11

最新评论