在 onChange 函数中,通过 e 对象获取上传的文件,然后遍历文件列表,使用 URL.createObjectURL() 方法获取每个文件的临时 URL,并将这些 URL 存储在 state 中。然后将 state 中的 URL 传递给 Dragger 组件的 thumbUrl 属性。
代码示例:
import React, { useState } from 'react';
import { Upload, message } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
const { Dragger } = Upload;
function App() {
const [fileList, setFileList] = useState([]);
const [thumbUrls, setThumbUrls] = useState([]);
const handleUpload = (file) => {
const tempUrl = URL.createObjectURL(file);
setThumbUrls([...thumbUrls, tempUrl]);
};
const handleChange = ({ file, fileList }) => {
if (file.status === 'done') {
message.success(`${file.name} 上传成功!`);
handleUpload(file.originFileObj);
}
setFileList(fileList);
};
return (
false}
thumbUrl={thumbUrls}
>
点击或拖拽文件到此区域上传
支持单个或批量上传,严禁上传公司数据或其他涉密文件
);
}
export default App;