如何从 React 一起传递图像和 JSON 并从 Nodejs 中的 req.body 获取？答案

【问题标题】：How to pass image and JSON together from React and get from req.body in Nodejs?如何从 React 一起传递图像和 JSON 并从 Nodejs 中的 req.body 获取？
【发布时间】：2021-10-06 23:38:09
【问题描述】：

假设我在前端传递了一些数据

{
 title: "Test Title",
 price: 100,
 media: {uid: 'rc-upload-1627793182603-11', lastModified: 1627745801648, lastModifiedDate: Sat Jul 31 2021 21:06:41 GMT+0530 (India Standard Time), name: 'sweet-corn-min.jpg', size: 50890, thumbUrl: "data:image/png;base64,........"}
}

在 nodejs 服务器中，我通过 req.body 进行处理。但是当我尝试上传到 cloudinary 时

await cloudinary.uploader.upload(
    media.thumbUrl,
    { folder: process.env.STORE_NAME }, //Uploads to Specific Store Folder
    async (err, result) => {
      imageUrls.push(result.secure_url);
    }
  );

目前我在这里使用 thumbUrl 上传到服务器。但这会将大小减小到 200*200。有没有其他方法可以从这些数据上传到 cloudinary？

已解决问题，现在我将 BASE64 数据传递到后端

【问题讨论】：

所以如果我理解正确的话，你是从 React 客户端向你的 nodejs 服务器发送一个包含文件和 json 元数据的请求，然后你提取文件并将其发送到 cloudinary？

标签： node.js reactjs cloudinary

【解决方案1】：

如果您需要在 1 个请求中同时发送 JSON 和文件，最好使用 multipart/form-data 请求。顾名思义，请求的一部分是 JSON 对象，另一部分是二进制格式的文件。这样做的好处是您在发送此类请求时节省字节（可能文件大小非常小，因为多部分请求的开销很小）。 Base64 编码将数据大小增加33-36%，因此以二进制格式发送文件会产生巨大的影响。

然后在您的服务器上，您从请求中提取文件部分并将其作为字节数组缓冲区传递给 file 参数中的 cloudinary 的 upload 方法。

【讨论】：