ant design pro 上传组件 手动添加文件信息

<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