在 reactjs 中将 formData 发送到 API答案

【问题标题】：Sending formData to API in reactjs在 reactjs 中将 formData 发送到 API
【发布时间】：2021-12-27 12:31:37
【问题描述】：

我正在使用html2canvas 将 HTML 转换为图像。
因此，每当用户提交表单时，我都会尝试使用 formData 将图像作为 blob 和其他详细信息发送到 API。
我正在向 API 发送 formData 以处理提交的数据。
当用户点击提交按钮时，下面的代码负责。

function handleReport(target = 'body') {
    html2canvas(document.querySelector(target))
      .then((canvas) => {
        let pngUrl = canvas.toDataURL(); // PNG is the default
        fetch(pngUrl)
          .then((res) => res.blob())
          .then((blob) => {
            const formData = new FormData();
            formData.append('images', [blob]);

            // textarea content
            formData.append('description', textAreaValue);

            // user device info
            formData.append('device[platform]', device.payload.platform);
            formData.append('device[name]', device.payload.name);
            formData.append('device[version]', device.payload.version);
            formData.append('device[ip]', device.payload.ip);
            formData.append('device[id]', device.payload.id);
            formData.append('device[app_version]', device.payload.app_version);
            formData.append('device[device_token]', device.payload.device_token);

            dispatch(actions.contactUs(util.getApiToken(), util.getToken(), formData));
          });
      })
      .catch((error) => {
        console.log(error);
      });
  }

动作定义：

export function contactUs(apitoken, token, payload) {
  return {
    [RSAA]: {
      endpoint: `${API_ENDPOINT}/contact-us?api_token=${apitoken}`,
      headers: {
        ...AUTH_HEADERS,
        Authorization: `Bearer ${token}`,
      },
      method: 'POST',
      body: payload,
      // body: JSON.stringify(payload),
      types: [
        types.CONTACT_US_REQUEST,
        types.CONTACT_US_RECEIVE,
      ],
    },
  };
}

以下是Chrome浏览器中payload（用户点击提交按钮后发送的内容）的截图（不是完整截图）

这是我从 API 得到的响应

我的问题是什么！
我正在发送所有必需的密钥（请参阅 formData），但不知道为什么会出现如下错误：

描述字段为必填项

【问题讨论】：

你在服务器上的技术栈是什么？负载是如何在服务器上进行消毒的，那里的对象是什么形状的？
我们正在使用 LAMP 堆栈作为后端。
我想问你，我在使用 formData() 时是否缺少任何标题属性？

标签： javascript reactjs form-data

【解决方案1】：

我的标题内容是-

AUTH_HEADERS = {
  'X-Authorization': X_AUTHORIZATION,
  'Content-Type': 'application/json',
};

我刚刚通过删除我发送的'Content-Type': 'application/json' 解决了我的问题。

现在我正在向 API 发送不带标头的请求。

headers: {
          'X-Authorization': X_AUTHORIZATION,
          Authorization: `Bearer ${token}`,
        },

现在一切正常。

【讨论】：