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

最新推荐文章于 2024-07-12 10:18:23 发布

君君要上天

最新推荐文章于 2024-07-12 10:18:23 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：开发小笔记文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/u010837612/article/details/121726400

开发小笔记专栏收录该内容

67 篇文章

订阅专栏

在Ant Design（Antd）的表单中，当使用Upload组件处理图片上传时，表单提交的值为File数组。为确保提交的是图片ID，需要在表单验证通过后转换这个值。例如，服务端返回的响应包含图片路径时，可以在提交前将Upload字段的值替换为该路径。同样，在更新弹出框设置初始值时，也要将图片ID转换为Upload组件所需的格式，即一个包含URL的对象数组。

问题

在使用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 }];
}