昨天还好好的，今天将文件上传封装成了一个简单的组件，其实也就相对封装了样式，但是今天就不行了，文件传给后端，后端接受不到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 写法。你可以提前切换。
