node.js - 图像上传 - 如何获取正确格式的图像数据以供服务器端处理

Question

我正在使用sharp在服务器端处理图像和 react dropzone获取图像文件。当我从 dropzone 将文件发布到服务器时，我从 request.body 中获取了如下所示的 blob:

{预览:'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 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 。 (还有模仿类型、原始名称等)

这应该足以让您开始。