解决antd表单中上传组件传值问题

问题

在使用antd的表单时，如果表单中有Upload组件，那么在提交表单时，该字段的值是一个File数组，大致如下图所示：

希望它传的是图片id

解决方法

在提交表单时，需要对该字段做一个转换。
比如我上传图片时服务端返回的response是：

{
	"image": "/path/to/image"
}

那么提交表单时需要做如下转换：

// 表单验证通过时
formRef.current?.validateFieldsReturnFormatValue?.().then((values) => {
  values.image = values.image[0]?.response?.image
  // 提交表单
  props.onSubmit(values);
}

同理，如果是更新弹出框，设置表单初始值时，也需要将图片id转换成上传组件所需要的类型：

const initialValues: any = { ...props.values } || {};
if (initialValues.id && initialValues.image) {
  initialValues.image = [{ url: initialValues.image }];
}