上传文件上传的示例代码

1.antd官网上传组件：

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

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

3.文件上传的实现：

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

答：渲染文件上传组件getPDFURL()方法为实现文件的上传显示上传列表为是否展示上传列表，真显示，假的不显示，其可设为一个对象，用于单独设定showPreviewIcon和showRemoveIcon。类型为上传按钮的图标。如下图所示。

{/* 渲染文件上传组件*/}上传{.这个。getpdfurl()} showUploadList={ false }按钮图标类型='上传'/上传文件/Button /Uploadb:getPDFURL()方法为实现文件的上传姓名。是发到后台的文件参数名行动。为上传文件的地址接受是接受上传的文件类型标题。是设置上传的请求头部，IE10以上有效onChange。是上传文件改变时的状态。代码如下图所示。

下面为代码：

getPdfURL=()={ const _ this=this；const props={ name: 'file '，action : AJaxUrl ' data/MoDElfileupload。SVT？cou_id=' this.state.cou_id，{/*文件上传接口和需要的传参*/}接受： '应用程序/msword，应用程序/vnd。office文档。文字处理。文档'，{/*接受上传的文件类型：此处为。文件格式*/}标头RS : { authorization : ' authorization-text '，}，onChange(info) {//上传文件改变时的状态if (info.file.status！=='上传){ console.log(info.file，info。file list)；} if(信息。文件。status==' done '){消息。成功(` $ { info。文件。名称}上传成功！`);_这个。setstate({ PdFurl: AJaxUrl信息。文件。回应。网址，字名：信息。文件。回应。WordName })else if(info。文件。状态==='错误'){消息。错误(`$ { info。文件。名称}上传失败！`);} }, };归还道具；}注意：接受可以用于设置接口不同类型的文件类型

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

答：渲染文件上传组件接受是接受上传的文件类型自定义请求通过覆盖默认的上传行为，customRequest()方法是自定义自己的上传实现文件列表是已经上传的文件列表（受控)。

上传接受='应用程序/ms word，应用程序/vnd。openxmlformas-office文档。文字处理。文档的自定义请求={ this。上传前的自定义请求={ this。上传前}文件列表={this.state.fileList}按钮图标类型='上传'/上传/Button/Uploadb:customRequest()方法是自定义自己的上传实现。

customRequest=(选项)={ const formData=new formData()；const文件URl=AJaxURl '数据/文件上传。' SVT '；formData.append('files[]'，选项。文件)；reqwest({ /*官网解释：又是AJAX遍布各地.包括支持xmlHttpRequest、JSONP、CORS和CommonJS承诺一个. */URL :文件URL，method: 'post '，processData: false，data: formData，success 3360(RES)={//RES为文件上传成功之后返回的信息，res.responseText为接口返回的值让fileInfo=JSON。解析(RES . responsetext)；if(RES){这个。setstate({ file info : file info，load : false，upload : false })})，错误：()={ this。setstate({ load : false，upload : false })错误消息(' '文件上传失败！');}, });}

注意：reqwest其实就是创建交互式、快速动态网页应用的网页开发技术异步请求。更多了解参考：https://www .npmjs。com/package/req west

安特德的上传组件上传功能踩坑

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

错误的起源

使用上传组件的自动上传方式，上传到项目后台网站地址接口，结果浏览器报错，报405错误

使用形式表单和投入元素进行原生射流研究…提交

提交到同一个界面，只报告了跨域错误，没有出现405错误

更改接口接收文件

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

新的问题背景只接收单个文件，不接受数组形式的文件列表

这应该是后台的原因，但是后台还没有找到解决方案，所以从前端使用了折中的办法，在获取文件列表后，遍历列表，反复将文件字段添加到FormData对象中

文件列表。foreach((值，索引)={formdata。追加('文件'，值)})说明：以上内容都是在开发过程中总结出来的。希望对大家的学习有帮助，支持我们。