antd-design从上传组件中取到url

Question

在使用antd-design上传组件时，碰到一个问题，表单提交时，该组件的值类似：

[  
 {  
????????"uid":"rc-upload-1599658260006-2",  
????????"lastModified":1510718130000,  
????????"lastModifiedDate":"2017-11-15T03:55:30.000Z",  
????????"name":"xchao.png",  
????????"size":351463,  
????????"type":"image/png",  
????????"percent":100,  
????????"originFileObj":{  
????????????"uid":"rc-upload-1599658260006-2"  
????????},  
????????"status":"done",  
????????"response":{  
????????????"data":"FvI3sfTlMyGMFvHqYjhnXa14aHBi",  
????????????"success":true  
????????},  
????????"xhr":{  
  
????????}  
????}  
]

我期望的是直接取response中的data。但试了多种方法未能成功，请指点。我的代码如下：

function normFile(e: any) {
  console.log('Upload event:', e);
  if (Array.isArray(e))
    return e;
  }
  return e && e.fileList;
}

const getValueProps = (e) => {
  console.log('getValueProps', e)
  if (e && Array.isArray(e)) {
    const url = e[0].response && e[0].response.data;
    console.log(url)
    return url
  }
  return '';
}

<Form.Item
    name="categoryImg"
    label="商品分类图片"
    getValueProps={getValueProps}
    getValueFromEvent={normFile}
    >

    <Upload
        name="file"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="https://admin.xxx.com/api/upload"
        beforeUpload={beforeUpload}
        onChange={handleChange}
        >
    {imageUrl ? (<img src={imageUrl} alt="商品分类图片" style{{ width: '100%' }} />) : (uploadButton)}
    </Upload>
</Form.Item>

Answer 1

等待大神解答