MEAN stack 上传头像并发送到浏览器
发布于 10 年前 作者 qitang 4166 次浏览 最后一次编辑是 8 年前 来自 问答

我用的angular-fullstack-generator 生成了一个框架。 想要实现的功能就是 用户注册的时候除了用户名和密码,还可以上传一个图片。 因为要用到 multipart form上传,所以我又用了 angular-file-uplpoad 来做这件事情。主要代码如下

// Requires multiparty 
multiparty = require('connect-multiparty'),
multipartyMiddleware = multiparty(),

// Requires controller
UserController = require('./controllers/UserController');

// Example endpoint 
router.post('/api/user/uploads', multipartyMiddleware, UserController.uploadFile);

因为用的mongo 所以 我又用了一个 module gridfs-stream 来把头像存进数据库,同时把这个头像的 _id存到 user里面。 到这里为止 好像都没问题,因为如果我把文件流直接输入到本地创建的文件里,我是可以打开这个图片的。但是问题是,当我从mongo里面如初图片,并发送到浏览器时, 图片始终不能正常显示。代码如下:

var Grid = require('gridfs-stream');
var GridFS = Grid(mongoose.connection.db, mongoose.mongo);
var fs = require('fs');

/*
  var UserSchema = new Schema({
  first_name: String,
  last_name: String,
  email: { type: String, lowercase: true },
  role: {
    type: String,
    default: 'user'
  },
  hashedPassword: String,
  provider: String,
  salt: String,
  phone: String,
  projects: [{
    type : Schema.Types.ObjectId,
    ref : 'Project'
  }],
  profile_picture: Schema.Types.ObjectId
});
*/

// each user has a _id for a image file in mongodb
getFile : function() {
   
   var readstream = GridFS.createReadStream({
        _id : this.profile_picture,
   });
   //用 download 方法发送本地的一个静态文件,也不能成功。
   //response.download('filename');
   response.writeHead(200, {'Content-Type': 'iamge/png' });
   readstream.pipe(response);
    
  },

卡在这里几天了,望大家集思广益帮忙解答一下,因为图片存取这个功能还是总要用的。 如果需要详细代码,可以留个言,我整理一下,发了个git的链接。谢谢大家了!

1 回复

一般图片的存储的做法是,存到硬盘上,数据库对应的保存其路径。 客户端请求是请求其图片地址,当然,对已静态资源,一般都是用nginx代理。 没什么难点。

回到顶部