antd Upload 文件上传的示例代码
1.antd官网upload组件:
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异步请求。更多了解参考:
antd的upload组件上传功能踩坑
在初次使用upload组件上传文件时,出现了几个风格各异的bug,因此做一个记录
错误的起源
使用upload组件的自动上传方式,上传到项目后台fdfs接口,结果浏览器报错,报405错误
使用form表单和input元素进行原生js提交
提交到相同接口,只是报跨域错误,并没有发生405错误
更改接口接收文件
这时决定不使用fdfs接口接收文件,后台同事重新提供一个后台接口。但是出现了新的问题。
新的问题 后台只接收单个文件 不接受数组形式的文件列表
这个应该是后台的原因,但是后台没有找到解决方法,于是从前端使用一个折衷办法,获取filelist后遍历list,重复添加file字段到formdata对象
filelist.foreach((value,index)=>{ formdata.append("file",value) })
说明:上述内容均是自己在开发过程中总结出来,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 新版小程序登录授权的方法
下一篇: 蓝桥杯——十六进制和十进制的相互转换