经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
antd Upload 文件上传的示例代码
来源:jb51  时间:2018/12/17 9:23:23  对本文有异议

1.antd官网Upload组件:

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

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

3.文件上传的实现:

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

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

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

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

下面为代码:

  1. getPdfURL = () =>{
  2. const _this = this;
  3. const props = {
  4. name: 'file',
  5. action: AjaxUrl + 'data/modelFileUpload.svt?cou_id=' + this.state.cou_id,{/*文件上传接口和需要的传参*/}
  6. accept:"application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",{/*接受上传的文件类型:此处为.doc格式*/}
  7. headers: {
  8. authorization: 'authorization-text',
  9. },
  10. onChange(info) {//上传文件改变时的状态
  11. if (info.file.status !== 'uploading') {
  12. console.log(info.file, info.fileList);
  13. }
  14. if (info.file.status === 'done') {
  15. message.success(`${info.file.name} 上传成功!`);
  16. _this.setState({
  17. pdfUrl:AjaxUrl + info.file.response.url,
  18. wordName:info.file.response.wordName
  19. })
  20. } else if (info.file.status === 'error') {
  21. message.error(`${info.file.name} 上传失败!`);
  22. }
  23. },
  24. };
  25. return props;
  26. }

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

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

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

  1. <Upload
  2. accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
  3. customRequest={this.customRequest}
  4. beforeUpload = {this.beforeUpload}
  5. fileList={this.state.fileList}
  6. >
  7. <Button>
  8. <Icon type='upload' />上传
  9. </Button>
  10. </Upload>

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

  1. customRequest = (option)=> {
  2. const formData = new FormData();
  3. const fileUrl = AjaxUrl+"data/fileUpload.svt";
  4. formData.append('files[]',option.file);
  5. reqwest({ /*官网解释:It's AJAX
  6. All over again. Includes support
  7. for xmlHttpRequest, JSONP, CORS,
  8. and CommonJS Promises A.*/
  9. url: fileUrl,
  10. method: 'post',
  11. processData: false,
  12. data: formData,
  13. success: (res) => {
  14. //res为文件上传成功之后返回的信息,res.responseText为接口返回的值
  15. let fileInfo = JSON.parse(res.responseText);
  16. if(res){
  17. this.setState({
  18. fileInfo:fileInfo,
  19. loading: false,
  20. uploading: false,
  21. defaultFile:false
  22. })
  23. }
  24. },
  25. error: () => {
  26. this.setState({
  27. loading: false,
  28. uploading: false
  29. })
  30. message.error("文件上传失败!");
  31. },
  32. });
  33. }

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

antd的upload组件上传功能踩坑

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

错误的起源

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

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

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

更改接口接收文件

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

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

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

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号