React实战ant design -上传上载_上传附件
虽然大家都在官方文档中看到过Upload组件，但在写作时仍然会遇到很多问题。 一些初学者看了文档束手无策，不用说正文太多的简单介绍。 直接看代码和注释，直接使用就可以了
我直接放在表格里。 实战中很少上传一个附件，所以几乎都是在表单中放附件上传，所以为了更好的APP应用，我会直接放在表单中运行APP应用
导入react，{ PureComponent } from 'react '；
导入{ form，Button，Icon，Upload} from 'antd '；
const FormItem=Form.Item；
@Form.create () )。
class XXX扩展采购组件{
state={
存储文件列表： [ ]，//上传信息：路径、文件名等
存储imgList: []，//回显信息：修改路径、文件名
(；
//form表单提交事件
handleSubmit=e={
const { dispatch，form }=this.props；
e .预设(；
form.validatefieldsandscroll ((err，values )={
if (！ err ()。
const { imgList }=this.state
values.imglist=JSON.stringify (imglist；
console.log('values '，values )；
}
)；
(；
//上传事件
onchange={filelist}}={
控制台. log (' file '，fileList；
let imgList=[]；
file list.map (功能(item，key ) )。
if (item.response item.response.success ) {
console.log(item.response )，item.response )；
imglist.push (URL : item.response.URL，Name: item.response.name } )； //这些参数具体看着上传成功后返回的值，打印出的item.response
} else {
//回波
if(item.URL ) {
//拼接' http://如果路径可以直接使用，则不需要拼接
imglist.push ({ URL : item.URL.replace (' http://'，'')，Name: item.name } )；
}
}
)；
this.setstate({filelist，imgList }；
}
render((/const ) form: ) getfielddecorator，getfieldvalue ) }=this.props；
const { fileList }=this.state
const props={
name: 'UploadFile '，//name必须看到接口的需要，name符合接口的需要
action: 'http://.//接口路径
DTA://接口所需的参数可以不用参数写
支持多文件： true，//多个文件
showUploadList: true，//展示文件列表
}
返回(
文件列表={文件列表}
onChange={this.onChange}
上传附件
提交
)；
}
导出默认值XXX；
代码可用于新功能和编辑功能。 如果有问题的话请联系我。 有不到的地方请多多关照