antd Upload 文件上传的示例代码


Posted in Javascript onDecember 14, 2018

1.antd官网Upload组件:

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

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

antd Upload 文件上传的示例代码

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是上传文件改变时的状态。代码如下图所示。

antd Upload 文件上传的示例代码

下面为代码:

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("文件上传失败!");
   },
   });
  }

antd Upload 文件上传的示例代码

注意: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中的return和闭包函数浅析
Jun 06 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
简单的网页广告特效实例
Aug 19 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
JavaScript 数组去重详解
Sep 15 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 #Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 #Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 #Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 #Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 #Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 #Javascript
JS实现的A*寻路算法详解
Dec 14 #Javascript
You might like
简单易用的计数器(数据库)
2006/10/09 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
演讲稿开场白
2014/01/13 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
mysql数据库入门第一步之创建表
2021/05/14 MySQL
Python语言规范之Pylint的详细用法
2021/06/24 Python
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android