node.js - 在 MERN 堆栈 Web 应用程序中存储图像的最佳方式

Question

我正在使用 MERN 堆栈(MongoDB、Express Server、ReactJS 前端和 NodeJS 后端)构建一个 Web 应用程序，并且想知道一些从后端存储图像的好方法。

过去，我直接从前端使用 Firebase 进行身份验证和存储。当我在 MongoDB 中处理我自己的用户身份验证模型时，是否仍然可以使用 firebase 存储，如果可以，它将来自前端还是后端。如果它来自前端，我如何在没有 Firebase 身份验证的情况下保护它？

我读过的其他选项是使用 GridFS 将图像存储到 MongoDB 或使用 Multer 存储在服务器上。

一旦我想到了解决方案，我将能够阅读文档并弄清楚如何完成它。

任何建议表示赞赏。

Answer 1

一个选项是将图像上传到 Cloudinary在客户端并使用您自己的 API 将返回的 URL 保存到 MongoDB。 Cloudinary 不仅可以托管您的图像，还可以处理图像处理和优化等。

基本上你要做的是:

注册 Cloudinary 帐户

转到设置 -> 上传

添加带有“未签名模式”的“上传预设”以启用未签名上传到 Cloudinary

那么你的上传功能可以是这样的:

async function uploadImage(file) { // file from <input type="file"> 
  const data = new FormData();
  data.append("file", file);
  data.append("upload_preset", NAME_OF_UPLOAD_PRESET);

  const res = await fetch(
    `https://api.cloudinary.com/v1_1/${YOUR_ID}/image/upload`,
    {
      method: "POST",
      body: data,
    }
  );
  const img = await res.json();
  // Post `img.secure_url` to your server and save to MongoDB
}