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>