上传多组标题、图片一一对应的信息。
展示样式:
新增、编辑返回的数据格式和通过defaultFileList回显的数据格式:
保存后,接口返回数据类型为:[ {案例url,案例名称},{} ]
代码思路:
新增:通过form来获取对应的字段的值,图片字段的信息通过 form 返回的 field 信息中response?.resultData?.url 来获取url。
回显:
1. 接口返回数据处理为upload回显图片的格式。
2. 通过 upload组件 的 defaultFileList 属性来回显已经保存的图片信息。
defaultFileList | 默认已经上传的文件列表 |
3. 因为通过 defaultFileList 属性回显保存的图片数据 和 新上传的图片数据 ,两者通过form返回的数据格式不一致,因此需要在获取数据后对图片的数据进行判断来获取对应的url。
对应的源码:
<Form.List name="productCaseList">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => {
return (
<Space
key={key}
style={{
display: 'flex',
marginBottom: 8,
}}
align="baseline"
>
<Form.Item
{...restField}
name={[name, 'exampleName']}
label="应用案例名称"
rules={[
{
required: true,
message: '请输入应用案例名称',
},
]}
>
<Input placeholder="应用案例名称" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'exampleDesc']}
label="应用案例图片"
valuePropName="fileList"
getValueFromEvent={normFile}
>
<Upload
name="logo"
action="/bossx/api/operationPlatform/uploadFile.json"
listType="picture"
maxCount={1}
defaultFileList={defaultFileList[name]?.productCaseList}
>
<Button icon={<UploadOutlined />}>Click to upload</Button>
</Upload>
</Form.Item>
{
drawerData.type == 'look' ? '' : <MinusCircleOutlined onClick={() => remove(name)} />
}
</Space>
)
})}
{
drawerData.type == 'look' ? '' : <Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
}
</>
)}
</Form.List>
const [defaultFileList, setDefaultFileList] = useState([]);
// 查看/编辑 回调函数
const handleLook = () => {
const newReder = _.cloneDeep(drawerData?.reader);
newReder.productCaseList = newReder?.productCaseList.map((item, index) => {
item.exampleDesc = [{
'uid': -index,
'name': 'image.png',
'status': 'done',
'url': item?.exampleDesc,
}]
return item
})
form.setFieldsValue({ ...newReder });
setDefaultFileList(newReder.productCaseList);
}
// 保存/编辑 回调
const handleSave = async () => {
const result = await form.validateFields();
// setSaveLoading(true);
const { productCaseList } = result;
const newArr = [];
productCaseList && productCaseList.map(item => {
newArr.push({
"exampleName": item.exampleName,
'exampleDesc': item?.exampleDesc?.[0]?.response ? item?.exampleDesc?.[0]?.response?.resultData?.url : item?.exampleDesc?.[0]?.url
});
})
const params = { ...result, "productCaseList": newArr };
}