项目中使用antd中的upload组件file对象到底是info.file还是info.file.originFileObj_坑

昨天还好好的，今天将文件上传封装成了一个简单的组件，其实也就相对封装了样式，但是今天就不行了，文件传给后端，后端接受不到file对象了。

一般写法：

<div >
	<Input 
	  value={aclFileName}
	  placeholder={'请选择文件'} 
	  title={`ACL文件`} 
	  onChange={(e) => this.inputName(`aclFileName`, e.target.value)} 
	  />
	<Upload
		maxCount={1}
		action="#"
		showUploadList={false}
		onChange={this.chengFileFun}
		beforeUpload={this.beforeUpload}
	>
	<Button rsType="noIcon" title="选择文件"></Button>
		<a href="#!" style={{ color: '#ccc', fontSize: '12px', marginTop: '8px', marginLeft: '8px' }}>请上传文件</a>
	</Upload>
</div>

beforeUpload这个函数返回的返回值伟false的时候不自动上传。

	beforeUpload = () => {
	    return false
	}

onchange事件，上传中、完成、失败都会调用这个函数。

文件状态改变的回调，返回为：

{
file: { /* … / },
fileList: [ / … / ],
event: { / … */ },
}

1.file 当前操作的文件对象。

{
   uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
   name: 'xx.png'   // 文件名
   status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性
   response: '{"status": "success"}', // 服务端响应内容
   linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
}

2.fileList 当前的文件列表。
3.event 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持；

说明onChange函数接收了一个对象作为形参。

	chengFileFun = (info) => {
	//因为没有 当前url#所有会触发error
	if (file.file.status === 'error') {
	    let name = info.file.name
	    let nameSplit = name.split('.')
	    if (nameSplit[nameSplit.length - 1] === 'txt') {
			let fileObj = info.file
	        this.setState({
	            aclFileName: name,
	            file:fileObj
	        })
	    } else {
	        message.warning("请上传txt文件")
	    }
	}
}

但是上午的时候突然发现info.file并不是文件对象，有时候又会是。

	chengFileFun = (info) => {
	//因为没有 当前url#所有会触发error
	if (file.file.status === 'error') {
	    let name = info.file.name
	    let nameSplit = name.split('.')
	    if (nameSplit[nameSplit.length - 1] === 'txt') {
			let fileObj = info.file.originFileObj ? info.file.originFileObj : info.file
	        this.setState({
	            aclFileName: name,
	            file:fileObj
	        })
	    } else {
	        message.warning("请上传txt文件")
	    }
	}
}

info.file.originFileObj ? info.file.originFileObj : info.file 使用三木可以很好的解决问题；

官方解释：

onChange 为什么有时候返回 File 有时候返回 { originFileObj: File }？

历史原因，在 beforeUpload 返回 false 时，会返回 File 对象。在下个大版本我们会统一返回 { originFileObj: File } 对象。当前版本已经兼容所有场景下 info.file.originFileObj 获取原 File 写法。你可以提前切换。