我在Ant Design中使用Upload Manually上传文件,但它无法将预览图像显示为base64。当我从浏览器中选择图像时,我想将预览图像base64显示为图片卡。我如何修复它?
我的代码上传:
const FormPost = () => {
const [fileList, setFileList] = useState([]);
const [uploading, setUploading] = useState(false);
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const normFile = (e) => {
console.log('Upload event:', e);
if (Array.isArray(e)) {
return e;
}
return e?.fileList;
};
const uploadProps = {
onRemove: (file) => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
setFileList(newFileList);
},
beforeUpload: (file) => {
setFileList([...fileList, file]);
return false;
},
listType: 'picture-card',
fileList,
};
return (
<Form layout="vertical" name="new-post" onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off">
<Form.Item label="Upload" valuePropName="fileList" getValueFromEvent={normFile}>
<Upload {...uploadProps}>
<div>New photo</div>
</Upload>
</Form.Item>
</Form>
);
};
1条答案
按热度按时间gz5pxeao1#
前几天我也在想这个问题,关键是要用用户选择的文件的
["thumbUrl"]
属性,我是这样解决的:如果是
Upload
组件的定义方式:它应该是您尝试向用户显示的
Image
组件: