使用nodeJs,Mongodb和Pug接收,存储和渲染图像

时间:2018-12-03 02:13:27

标签: node.js mongodb forms image pug

graphic of what I am trying to do

嗨,我是一名新手开发人员,我正在尝试进行网络应用,确切地说是Twitter的简单克隆,以示教义。 我正在使用 NodeJs 和Express, MongoDB (以猫鼬作为数据库)和 Pug 作为视图渲染。
然后我有两种策略:

  • 接收原始图像数据,将其存储在/public文件夹中,将图像的路径存储在mongodb中,然后将链接发送回该图像并将其分配到pug中。
  • 接收原始图像数据,将二进制图像数据存储在mongodb中,然后将二进制数据发送回客户端并由客户端处理。我不知道该怎么做。

所以我试图注册一个新的User(我已经用mongoose.model()进行了建模)

var mongoose = require("mongoose")

var usrSchema = mongoose.Schema({
  name: String,
  mail: String,
  pass: String,
  prof_pic: Buffer, // not working
  level: Number
})

module.exports = mongoose.model('User', usrSchema)

在没有prof_pic的情况下使用带有POST的HTML表单可以很好地进行注册。 这是我的userpug.pug文件:

html
  head
  body
    form(method="post" action="usuarios")
      input(type="text" name="name")
      br
      input(type="text" name="mail")
      br
      input(type="text" name="pass")
      br
      input(type="file" name="prof_pic") // not working
      br
      input(type="submit" value="Add")
      br
      #image_space= var_image // not working

这是我的服务器node.js文件:

var mongoose = require("mongoose")
var bodyParser = require("body-parser")
app.use(bodyParser.urlencoded({extended:false}))
var User = require("/models/user.js")
var fs = require("fs")

// just renders a form where to upload the data
app.get("/", (req,res,next) => {
  res.render("userpug")
})

// handles data upload
app.post("/", (req,res,next) => {
  new_usr = new User({
    name: req.body.name,
    mail: req.body.mail,
    pass: req.body.pass,
    prof_pic: req.body.prof_pic, // does not work fine
    level: 1 // every user starts at lvl 1
  })

  // save the file
  User.save() // it works

  fs.writeFile("images/profile_picture.jpg", req.body.prof_pic, (err) => {
    console.log(err)
  }) // works but file is invalid

  console.log("image data: ", req.body.prof_pic) //it just prints fileName.jpg
  res.redirect("/result")
})

但是当我尝试加载数据时,以下两项均无效:

// rendering the file from database
app.get("/result", (req,res,next) => {
  User.findOne({}).then(user => {
    console.log(user.prof_pic.buffer) //only prints file name bytes
    res.render("userpug", {var_image: user.prof_pic.buffer}) //not working
  })
})
// or trying to render from file system
app.get("/result", (req,res,next) => {
  fs.readFile("images/profile_picture.jpg", (err, data) => {
    console.log("image data: ", data) //only shows filename bytes
    res.render("userpug", {var_image: user.prof_pic.buffer}) // ???
  })
})

所以问题是我不知道如何处理来自<form>的数据,如何转换为二进制文件,如何读取数据,最后如何在pug视图中呈现数据。

我尝试了文件系统和原始数据策略,但仍然无法正常工作。我对Base64和Buffers进行了一些研究,但仍然无法解决问题,有关二进制数据转换和图像的信息也很差(或者也许我听不懂)。 非常感谢您的宝贵时间!

0 个答案:

没有答案