上传多组带标题的图片

上传多组标题、图片一一对应的信息。

 展示样式：

新增、编辑返回的数据格式和通过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 };
}