使用node-js、mongoose和multer的图片上传平台

Question

我正在拼命尝试在 node-js 中构建一个图片库，我可以： 1.使用表格从硬盘上传图片 2.将上传的文件保存在mongo-DB(mongoose) 3. 检索上传的图片并显示在我的网站上

我对 node 和 mongodb 还是很陌生，所以我很难做到这一点（对简单的新闻/纯文本 db-schema 做同样的事情非常容易）。我以前搜索过所有类似的主题，但没有一个对我有帮助，所以我现在真的很绝望，因为在解决它的过程中我不得不复制一些我不理解的代码部分。请帮助我一些初学者的解释！

我的html表单

        <form id="uploadForm" action="/images" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="imageSelector">Select Image</label>
            <input type="file" class="form-control" name="image" placeholder="upload image" id="imageSelector" accept="image/png, image/jpeg">
        </div>
        <div class="form-group imagePreview">
            <p>No files currently selected for upload</p>
        </div>
        <div class="form-group">
            <label for="imageDescription">Image Description</label>
            <input type="text" class="form-control" name="description" placeholder="description" id="imageDescription">
        </div>
            <button class="btn btn-success">submit</button>
    </form>

我的数据库架构：

let imageSchema = new mongoose.Schema({
img:  { data: Buffer, contentType: String },
description: String});

module.exports = mongoose.model("Image", imageSchema); //Exporting my Schema

我的路线文件：

let express = require("express");
let mongoose = require("mongoose");
let bodyParser = require("body-parser");
let router = express.Router({mergeParams: true});
let multer  = require("multer");

let Image = require("../models/image"); //Using DB-Schema that I exported

const GridFsStorage = require('multer-gridfs-storage');

const storage = new GridFsStorage({
  url: "mongodb://localhost/My_DB",
  file: (req, file) => {
    return {
      filename: 'file_' + Date.now()
    };
  }
});

const upload = multer({ storage });
const sUpload = upload.single('image');


router.post('/', sUpload, (req, res, next) => { 
    console.log("FILENAME: " + req.file.filename);
    console.log("CHUNKSIZE: " + req.file.chunkSize);
    console.log("CONTENTTYPE: " + req.file.contentType);
    Image.create(req.file, function(err, addedImage) {
        if(err) {
            console.log(err);
        } else {
            console.log("SUCCESSFULLY ADDED NEW IMAGE! " + addedImage);
            res.redirect("/images");
        }
    })

});

module.exports = router;

现在，我必须做些什么才能获取实际文件来检索它？当我加载我的 html-form 并上传图片时，点击提交后，我得到以下 console.logs：

FILENAME: file_1522841638818
CHUNKSIZE: 261120
CONTENTTYPE: image/png
PATH: undefined
ADDED NEW IMAGE SUCCESSFULLY! { _id: 5ac4b82674d2091a8db36f2f, __v: 0 }

当我转到我的数据库“My_DB”并查看 db.images.find() 时，图像未上传。所以我需要知道 1.如何上传到我的数据库？ 2.如何找回并真正使用文件本身在html中显示？

非常感谢！

顺便说一句：我实现了整个 multer-gridfs-storage 东西，因为我认为没有它就无法上传 > 16 MB 的图像。我想我还没有真正使用 multer，所以也许你可以给我一些关于如何获取图像文件的提示。我知道，您可能会谈论我实现的特定软件包的一些文档。相信我，这只是大约 100 种不同尝试中的一种尝试，我现在真的很困惑什么对我来说很重要：-/

Answer 1

要将图像存储到mongoDB，您需要在链接https://devdactic.com/ionic-image-upload-nodejs-server/中编写类似这样的服务

Answer 2

使用

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '/tmp/my-uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})

var upload = multer({ storage: storage })

Url : 是文件系统路径而不是 mongo 路径 您的模型还需要数据、内容类型、描述字段

    img:  { 
      data: Buffer, 
      contentType: String },
     description: String});

但是 req.file 不包含它在同一个键上，所以请用键映射创建新的 json

更多信息：https://github.com/expressjs/multer