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中的isXX系列是否继续使用的分析
Apr 16 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
如何在JavaScript中等分数组的实现
Dec 13 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
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
php,ajax实现分页
2008/03/27 PHP
PHP 文件扩展名 获取函数
2009/06/03 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
两个php日期控制类实例
2014/12/09 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
餐饮投资计划书
2014/04/25 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
女生抽烟检讨书
2014/10/05 职场文书
2014年工会工作总结
2014/11/12 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
宾馆安全管理制度
2015/08/06 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
Python测试框架pytest高阶用法全面详解
2022/06/01 Python