图像上传 - 如何为服务器端处理获取正确格式的图像数据
Image uploading - How to get the right format of image data for server side processing
我正在使用 sharp to process images on the server side and react dropzone 获取图像文件。当我 post 将文件从 dropzone 传送到服务器时，我从 request.body 中取出 blob，看起来像：
{ preview: 'blob:http%3A//127.0.0.1%3A3000/1451580a-b24f-478f-a9f7-338c0d790829' }
可选地，在我将数据发送到服务器之前，我可以使用 FileReader（或其他东西）对图像文件做一些事情，而不是把它变成一个 blob。
夏普需要：
- 包含 JPEG、PNG、WebP、GIF、SVG、TIFF 的缓冲区
- 原始像素图像数据
- 包含图像文件路径的字符串，支持大多数主要格式。
我怎样才能使用我所拥有的东西来提供支持的格式？
我建议试用一个名为 Multer 的 node.js 模块来帮助您访问服务器上的照片文件。
https://github.com/expressjs/multer
首先，在客户端，您需要将文件附加到 FormData 对象，如下所示：
// obtain the file from your react dropzone and save it to this file variable
const file = dropzone.file // not sure how you do this with react dropzone
const data = new FormData()
data.append('photo', file)
然后您将这个 FormData 对象发送到您的服务器。在服务器上，您将在用于处理照片的路线上使用 Multer。
确保你 npm install multer，并在你的服务器或路由文件中要求它。如果您要发送单个文件，您将使用 multer 'single' 方法。如果您想做任何不同的事情，请查看 API 文档。
app.post('/photos', multer().single('photo'), controller.processPhoto);
在此示例路由中，您向 /photos 发送 POST 请求，multer 正在查找 FormData 键为 'photo' 的文件并将其附加到请求对象。
然后在这个组成的 'controller.processPhoto' 方法中，您可以在 req.file 上访问作为请求对象的 属性 的图像。有了它，您可以轻松访问很多有用的信息，包括听起来您需要的图像缓冲区 req.file.buffer。 （还有 mimetype、原始名称等）
这应该足以让您入门。
我正在使用 sharp to process images on the server side and react dropzone 获取图像文件。当我 post 将文件从 dropzone 传送到服务器时，我从 request.body 中取出 blob，看起来像：
{ preview: 'blob:http%3A//127.0.0.1%3A3000/1451580a-b24f-478f-a9f7-338c0d790829' }
可选地，在我将数据发送到服务器之前，我可以使用 FileReader（或其他东西）对图像文件做一些事情，而不是把它变成一个 blob。
夏普需要：
- 包含 JPEG、PNG、WebP、GIF、SVG、TIFF 的缓冲区
- 原始像素图像数据
- 包含图像文件路径的字符串，支持大多数主要格式。
我怎样才能使用我所拥有的东西来提供支持的格式？
我建议试用一个名为 Multer 的 node.js 模块来帮助您访问服务器上的照片文件。
https://github.com/expressjs/multer
首先，在客户端，您需要将文件附加到 FormData 对象，如下所示：
// obtain the file from your react dropzone and save it to this file variable
const file = dropzone.file // not sure how you do this with react dropzone
const data = new FormData()
data.append('photo', file)
然后您将这个 FormData 对象发送到您的服务器。在服务器上，您将在用于处理照片的路线上使用 Multer。
确保你 npm install multer，并在你的服务器或路由文件中要求它。如果您要发送单个文件，您将使用 multer 'single' 方法。如果您想做任何不同的事情，请查看 API 文档。
app.post('/photos', multer().single('photo'), controller.processPhoto);
在此示例路由中，您向 /photos 发送 POST 请求，multer 正在查找 FormData 键为 'photo' 的文件并将其附加到请求对象。
然后在这个组成的 'controller.processPhoto' 方法中，您可以在 req.file 上访问作为请求对象的 属性 的图像。有了它，您可以轻松访问很多有用的信息，包括听起来您需要的图像缓冲区 req.file.buffer。 （还有 mimetype、原始名称等）
这应该足以让您入门。