首页 > 解决方案 > 如何从 React 一起传递图像和 JSON 并从 Nodejs 中的 req.body 获取?

问题描述

在前端,我正在传递一些数据,让我们说

{
 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 数据传递到后端

标签: node.jsreactjscloudinary

解决方案


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

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


推荐阅读