项目中使用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 写法。你可以提前切换。