javascript - 使用 Express js 在其帐户创建或注册表中上传用户图像

Question

我是 Node js 新手，我正在创建一个简单的应用程序，用户将在其中创建一个包含详细信息的帐户，并且我在后端使用 mongo dB 来存储用户的详细信息(他的姓名、电子邮件等)。

创建口音后，我将其重定向到用户必须登录的登录页面，登录成功后，用户将被重定向到个人资料，现在我正在使用 session 显示他的名字。

现在我想要的是，我想在创建帐户时上传用户的图像，我想知道如何将其链接到我的帐户创建表单(如屏幕截图所示)，同时将其保存到 mongodb。

我想在用户登录时将用户的图像显示为个人资料图片，并将重定向到其个人资料页面。

我找到了许多有关在 mongodb 上保存图像的链接，但无法获得任何帮助，我还附上了个人资料页面屏幕截图。

我该如何实现这个？

个人资料页面

Answer 1

如果你确实想将个人资料图片保存到 MongoDB 中。我建议您通过When should I use GridFS?

然后决定您允许用户上传的个人资料图片的最大尺寸是多少

MongoDB BSON文档的上限为 16MB。因此，如果您的用户的整个文档总计不超过16MB，您可以使用BinData将它们直接存储在您的文档中。数据类型。

图像/视频/PDF/Ppt/电子表格等 - 这并不重要，它们可以以相同的方式存储。由您的应用程序在 header 中返回适当的内容类型，以便在您的网络应用程序中正确显示。

编码愉快..:)

<小时/> 更新: 为此，您需要对图像数据进行 Base64 编码，如下所示:

var base64Image = new Buffer(uploadedFilesData, 'binary').toString('base64');

然后使用 Mongo 的 BinData 类型存储它，然后它会将其保存为 BSON 位数组，而不是实际存储 base64 字符串，因此大小不会比原始二进制图像大。当您从 MongoDB 读取数据并希望用作图像时，您可以执行以下操作:

app.get('/getimage', function(req, res) {
  db.collection.find({'imgId':req.params.id}, function(err,data) {
      var base64Image = var img = new Buffer(data.imgDataField, 'base64');
      res.writeHead(200, {
        'Content-Type': 'image/jpeg',
        'Content-Length': base64Image.buffer.length
      });
      res.end(base64Image.buffer);
  }
}

客户端您应该显示 base64Image 数据，如下所示:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAB50RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNS4xqx9I6wAAAVBJREFUOI2tlLFKA0EQhr+9i2J1kBDFYG91gYRA0ngpJELQ2KSwlFjYKIidlZVvIFgEXyBYaBH0ESysLATBPiRYWFgEye7eWkSimL1wyg1MM//Mx87O7ghjjCEhc5ICJQ5LRQm9/oDLqzsenl4QgAHK/ir7O5us5JatNcJ2Z73+gKOzCz6kQjguQoAxYELNwlyK89NDK9DaZrvTZTiS4LggBAYBQoDjMhxJ2p1u/DbvH59xU/MYrac0Y8Z6bJgJDaEF9FOPDdNKMev1hVrFh2XTHq9v75GwpYxnjVsH0GrW0UqhtZ52pWg16/FhjVpANu2Ngb88m/Zo1IL4MICg5FthQcmPKomGVSsFpJQopSYupaRaKUTCIr9TuZhnq76O47iTWBhqysX832EA1ze3COf78LnFDBzvRebP3BrbG2tfUx23eXKwOyvd/tH/a4nus083fKdxIODDXwAAAABJRU5ErkJggg==" />