node.js - 如何从 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 数据传递到后端
解决方案
如果您需要在 1 个请求中同时发送 JSON 和文件,最好使用multipart/form-data
request. 顾名思义,请求的一部分是 JSON 对象,另一部分是二进制格式的文件。这样做的好处是在发送这样的请求时可以节省字节(除了文件大小可能非常小,因为多部分请求的开销很小)。Base64 编码将数据大小增加了33-36%,因此以二进制格式发送文件可以产生巨大的影响。
然后在您的服务器上,从请求中提取文件部分并将其作为字节数组缓冲区传递给参数upload
中的 cloudinary 方法file
。
推荐阅读
- c# - Tesseract.NET SDK 弄乱了一些数字
- html - 随着屏幕尺寸变小,如何每行显示 3 个 div
- python - 当 python 脚本崩溃时,csv writer 留下空的输出文件
- wpf - UWP BarcodeScanner DataRecieved 事件未在 WPF 应用程序中触发
- r - 在已绘制的地图上添加传单 R 上的圆形标记
- arrays - 如何从c中的字符串数组中删除重复的字符串
- google-app-engine - 通过从 AppEngine 部署的应用程序从谷歌分析中提取数据时出现 500 错误
- css - react-jss 复杂的条件样式
- javascript - 网站的 javascript 适用于 android、windows、linux 和所有浏览器,但不适用于 mac、ios 在任何浏览器上
- c# - 实时数据库 Firebase 中的 startAfter()