Question

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

现在到节点/ 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'为null

由于我的问题有所改变，我将此问题标记为已解决，新问题在此处：Displaying Images in Angular.js from MongoDB

Answer 1

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

mongoose-model.js

#include <iostream>
#include <vector>
#include <sstream>
using namespace std;

/*
 1) Write a program with total change amount as an integer input that outputs the change using the fewest coins, one coin type per line.
 2) The coin types are dollars, quarters, dimes, nickels, and pennies.
 3) Use singular and plural coin names as appropriate, like 1 penny vs. 2 pennies.
 
 4) Your program must define and call the following function.
            void ExactChange(int userTotal, vector<int>& coinVals)
 
 5) Positions 0-4 of coinVals should contain the number of dollars, quarters, dimes, nickels, and pennies, respectively.
 */

void ExactChange(int userTotal, vector<int>& coinVals);
const int PENNIES_IN_DOLLAR = 100, PENNIES_IN_QUARTER = 25, PENNIES_IN_DIME = 10, PENNIES_IN_NICKEL = 5;

int main() {
   int userTotal;
   cin >> userTotal;
        
   if (userTotal == 0) {
      cout << "no change" << endl;
   }
   else {
      vector<int> coinVals;
      ExactChange(userTotal, coinVals);

      if (coinVals[0] > 0) {
         cout << coinVals[0];
         if (coinVals[0] > 1) {
            cout << " dollars" << endl;
         } else {
            cout << " dollar" << endl;
         }
      }

      if (coinVals[1] > 0) {
         cout << coinVals[1];
         if (coinVals[1] > 1) {
            cout << " quarters" << endl;
         } else {
            cout << " quarter" << endl;
         }
      }

      if (coinVals.at(2) > 0) {
         cout << coinVals[2];
         if (coinVals[2] > 1) {
            cout << " dimes" << endl;
         }else {
            cout << " dime" << endl;
         }
      }

      if (coinVals[3] > 0) {
         cout << coinVals[3];
         if (coinVals[3] > 1) {
            cout << " nickels" << endl;
         }else {
            cout << " nickel" << endl;
         }
      }

      if (coinVals[4] > 0) {
         cout << coinVals[4];
         if (coinVals[4] > 1) {
            cout << " pennies" << endl;
         }else {
            cout << " penny" << endl;
         }
      }
   }

   return 0;
}

void ExactChange(int userTotal, vector<int>& coinVals) {    
    int dollars = userTotal / PENNIES_IN_DOLLAR;
    userTotal %= PENNIES_IN_DOLLAR;
    int quarters = userTotal / PENNIES_IN_QUARTER;
    userTotal %= PENNIES_IN_QUARTER;
    int dimes = userTotal / PENNIES_IN_DIME;
    userTotal %= PENNIES_IN_DIME;
    int nickels = userTotal / PENNIES_IN_NICKEL;
    userTotal %= PENNIES_IN_NICKEL;
    int pennies = userTotal;
    
    coinVals.resize(5);
    coinVals[0] = dollars;
    coinVals[1] = quarters;
    coinVals[2] = dimes;
    coinVals[3] = nickels;
    coinVals[4] = pennies;
}

在主脚本上，您应该得到

avatar : {
    type : String
}

类似的东西

Answer 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
})

Answer 3

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

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

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

因此，您应该尝试理解为什么这部分返回null。

Answer 4

越来越重复，但是express不支持img上传所以我们应该做这一步：

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

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

我建议阅读multer docs

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.去检查你的数据库，看看发生了什么

用猫鼬保存图像

4 个答案: