用猫鼬保存图像答案

【问题标题】：Saving image with mongoose用猫鼬保存图像
【发布时间】：2015-02-05 20:01:12
【问题描述】：

我知道已经有很多关于这个主题的主题，但不幸的是我直到现在才找到答案。我使用 angular.js 和来自http://angular-js.in/image-upload/ 的示例代码从客户端获取图像。这部分有效

现在到 node/mongodb 部分，这是我的后端模型：

var userSchema = new mongoose.Schema({
    avatar: { data: Buffer, contentType: String },
    // ...
});

module.exports = mongoose.model('User', userSchema);

和我的节点代码：

exports.createAvatar = function (req, res) {
  var avatar = {
    data: req.body.data.image, // see below
    contentType: 'image/png'
  }

  models.DUser
    .findById(index.findUserId(req))
    .exec(function (err, user) {
      user.avatar = avatar;
      // ...
      user.save(function (err, user) {/* ... */ });

还有我的 angularCtrl：

var foo = {
  image: image,
  imageName: image.name,
};

$http.post('/api/users', {data: foo })
    .success(function (result) { /*...*/ });

除了 req.body.data.image 我尝试了许多不同的变体，例如 req.body.data.image.dataURL、req.body.data.image.dataURL.data，但到目前为止没有任何效果。我的 req.body.data.image 记录显示：

{ file: 
   { webkitRelativePath: '',
     lastModified: 1411073963000,
     lastModifiedDate: '2014-09-18T20:59:23.000Z',
     name: '3770316278.png',
     type: 'image/png',
     size: 32493 },
  url: 'blob:http%3A//127.0.0.1%3A3000/cb20debc-8a3a-468f-ab5c-39299f7ec52b',
  dataURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACHCAYAAAC.....

如何将图像保存到数据库中？

编辑

我尝试将base64, 之后的所有内容从req.body.data.image.dataURL 保存到头像中，如下所示：

var split = req.body.data.image.dataURL.split('base64,');
var type = split[0];
var data = split[1];

var avatar = {
    data: type,
    contentType:'image/png'
};

保存消息还在：

user.avatar = avatar
user.save(function (err, user) {}

但我仍然得到错误

TypeError: 无法设置属性 'avatar' of null

由于我的问题发生了一些变化，我将这个问题标记为已解决，新问题在这里：Displaying Images in Angular.js from MongoDB

【问题讨论】：

所以你想将 Blob 数据存储到 mongo 中，还是只是图像在服务器上的路径？
我想将 blob 存储到 mongo 中
嗯，文件数据可能在您的 req.files 对象中。并参考GridFS在mongo中存储二进制数据。
看起来 dataURL 字段有以 base64 编码的图像数据。如果要存储图片数据，只要存储data:image/png;base64,之后的内容，就是base64编码的png。
在您的EDIT 中，用户对象是null。如错误中所述。

标签： javascript angularjs node.js mongodb mongoose

【解决方案1】：

你知道，这绝对不是在 mongo 上保存图像数据的最佳方式。相反，您可以将图像保存在服务器上的任何目录中，并且只保存文件的 url，例如..

猫鼬模型.js

avatar : {
    type : String
}

在你的主脚本上你应该得到

let avatar_url = '/path/to/uploads/' + req.body.data.image.file.name

类似的东西

【讨论】：

【解决方案2】：

如果您使用的是 express，则可以使用 express-fileupload 中间件上传文件。

const fileUpload = require('express-fileupload');
app.post('/upload', fileUpload, (req, res) => {
  //Now you can use req.files.file to access the file input with name="file"
  user.avatar = {data: req.files.file.data, contentType: req.files.file.mimetype};
  //Now perform user.save
})

【讨论】：

【解决方案3】：

您的问题似乎与图片无关。

根据你的代码，错误信息TypeError: Cannot set property 'avatar' of null表示变量user是null。

而user 是findById(index.findUserId(req)) 的结果。

所以你应该试着理解为什么这部分返回null。

【讨论】：

【解决方案4】：

越来越重复，但 express 不支持 img 上传，所以我们应该执行此步骤：

首先安装 multer 或（任何你喜欢的东西）+加上 fs path 和 sharp（调整大小和更改格式的 npm 模块有助于简化工作

const sharp = require("sharp");
const fs = require("fs");
const path = require("path");
const multer = require("multer");

我建议阅读 multer 文档

2.我们需要一个表格来上传图片

<form action="/profile" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" />
</form>

3. 小路线设置

我们有一个文件，所以我们使用单一方法，我们需要 tmperory 目的地来保存文件我在项目的根目录中使用了一个名为 upload 的文件夹

let upload = multer({ dest: "upload/" });
app.post('/profile', upload.single('avatar'), function (req, res) {

  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any

const buffer = await sharp(
        path.join(__dirname, `../upload/${req.file.filename}`),
      ).png().toBuffer();
 
      const user = await User.findOneAndUpdate(
        { _id: "5ffb8e8b5f31732740314c72" },
        { avatar: buffer },
      );
})

现在通过查找和更新，我们成功更新或创建了头像文件

文件名是该文件夹中缓冲区命名的随机字符串

4.去检查你的数据库看看发生了什么

【讨论】：