<Upload
name="file"
action="/fscserv/fileserv/fileUpload"
onChange={onChange}
beforeUpload={beforeUpload}
accept=".jpg,.png,.txt,.doc,.xlsx,.rar,.zip,.docx,.xls,.ppt,.voc,.mp3,.pdf"
maxCount={10}
fileList={oldFileList}//设置历史的值
>
<Button icon={<UploadOutlined />}>上传附件</Button>
</Upload>
在Form中使用这个组件。
设置默认历史值的时候智能用fileList,要是使用defaultfilelist则只能设置一次,之后就无法改变了。使用filelist可以来回改变
const [oldFileList, setOldFileList] = useState([]);
if(files.length > 0){ files.map((item)=>{ let temp = { uid:item.attachId, name:item.attachName, status:'success', // url:item.attachPath, }; fff.push(temp); }) }
fff为对象的数组 setOldFileList([...fff]);
因为使用了fileList,所以在onchange上传文件的时候,需要有一个地方特殊处理
const onChange = (info) => {
setOldFileList(info.fileList.slice());//如果在upload中fileList中使用了,上传时,要使用这个
console.log('onChange=',info);
if (info.file.status !== 'uploading') {
console.log("uploading",info.file, info.fileList);
}
if (info.file.status === 'done') {
console.log("done info.file",info.file);
console.log("done info.file.response",info.file.response.data);
message.success(`${info.file.name} 文件上传成功。`);
setFileList(info.fileList)
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 文件上传失败。`);
}
};
setOldFileList(info.fileList.slice());//如果在upload中fileList中使用了,上传时,要使用这个。比较关键
https://ant.design/components/upload-cn/
https://github.com/ant-design/ant-design/issues/2423