图像上传-如何获得正确格式的图像数据进行服务器端处理

Question

我使用sharp在服务器端处理图像，并使用react dropzone获取图像文件。当我从dropzone将文件发布到服务器时，我会从请求中得到blob。body看起来像：

{ preview: 'blob:http%3A//127.0.0.1%3A3000/1451580a-b24f-478f-a9f7-338c0d790829' }

可选地，在将数据发送到服务器之前，我可以使用FileReader（或其他东西）对图像文件进行处理，而不是将其变成blob。

锐取：

• 包含JPEG、PNG、WebP、GIF、SVG、TIFF的缓冲区
• 原始像素图像数据
• 包含图像文件路径的字符串，支持大多数主要格式

我如何使用我所拥有的来提供一种支持的格式？

Answer 1

我建议尝试一个名为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安装了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、原名等）

这应该足以让你开始。