当前位置：首页 > article >正文

将产品照片（form.productPhotos）转为 JSON 字符串发送给后端

article 2025/2/23 19:22:25

文章目录

- - 1. 前端 `form.productPhotos` 的当前处理
  - - a. 组件绑定
    - b. 当前发送逻辑
  - 2. 如何将 `form.productPhotos` 转为 JSON 字符串发送给后端
  - - a. 修改前端 `save()` 方法
    - b. 确保 `esave` API 支持接收字符串

基于你提供的 identify-form.vue 代码，我将分析如何将产品照片（ form.productPhotos）转为 JSON 字符串发送给后端，以及后端如何接收和处理这些数据。以下是详细的分析和步骤：

1. 前端 `form.productPhotos` 的当前处理

在你提供的代码中，form.productPhotos 是通过以下方式定义和使用的：

a. 组件绑定

form.productPhotos 绑定到 w-form-multiple-image 组件，表示“产品照片”：

<w-form-multiple-image
  v-model="form.productPhotos"
  label="产品照片"
  label-width="120px"
  :operate-type="operateType"
  folder-name="fake-strategy"
  :limit="4"
/>

form.productPhotos 是一个数组，用于存储多张图片的路径、URL 或文件对象（具体取决于 w-form-multiple-image 组件的实现）。例如：
```
form.productPhotos = ["photo1.jpg", "photo2.jpg", "photo3.jpg", "photo4.jpg"]
```

b. 当前发送逻辑

在 save() 方法中，form.productPhotos 直接作为 data 的一部分发送给后端，没有经过 JSON.stringify 或其他格式转换：

private async save() {
  const data = this.form
  const res: any = await esave(data)
  if (res?.code === 0) {
    this.$emit('close', true)
  }
}

因此，前端发送的 productPhotos 是一个 JSON 数组（例如 ["photo1.jpg", "photo2.jpg", "photo3.jpg", "photo4.jpg"]），通过 HTTP 请求体以 JSON 格式发送。

2. 如何将 `form.productPhotos` 转为 JSON 字符串发送给后端

如果你希望将 form.productPhotos（一个数组）转为 JSON 字符串发送给后端，可以修改 save() 方法，添加 JSON.stringify 转换。以下是修改后的代码：

a. 修改前端 `save()` 方法

private async save() {
  const data = {
    ...this.form,
    productPhotos: JSON.stringify(this.form.productPhotos) // 转换为 JSON 字符串
  };
  const res: any = await esave(data);
  if (res?.code === 0) {
    this.$emit('close', true);
  }
}

发送的 productPhotos 格式：
- 如果 form.productPhotos = ["photo1.jpg", "photo2.jpg", "photo3.jpg", "photo4.jpg"]，经过 JSON.stringify 后，发送的 productPhotos 值为：
```
"["photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg"]"
```
- 这样，productPhotos 作为一个 JSON 字符串发送给后端。