使用node-js，mongoose和multer的图像上传平台

Question

I'm desperately trying to build an image gallery in node-js where I can: 1. use a form to upload an image from the harddrive 2. save the uploaded file in mongo-DB (mongoose) 3. Retrieve the uploaded images and show it in my website

I'm quite new to node and also mongodb, so I have a really hard time doing this (doing the same for simply news / text-only db-schemas was so easy). I have searched all similar topics before, but none of them helped me, so I'm really desperate now since I had to copy some code-parts that I don't understand on the way to solving it. Please help me with some beginners explanations!

My html form

        <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>

My DB-Schema:

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

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

My route file:

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;

Now, what do I have to do to get the actual file to retrieve it? When I load my html-form and upload an image, after clicking submit, I get the following console.logs:

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

When I go to my DB "My_DB" and take a look at db.images.find() the image is not uploaded. So I need to know 1. How to upload it into my DB? 2. How to retrieve it and really use the file itself to show it within html ?

Thanks very much!

Btw.: I implemented this whole multer-gridfs-storage thing because I red that you can't upload images > 16 MB without it. I think I'm not really using multer yet so maybe you can give me some hints of how I can get to the image file. I know, you might talk about some docu of specific packages that I implemented. Believe me, this is only one attempt of about 100 different attempts to approach this and I'm really confused now of what is important for me :-/

Answer 1

Use

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 : is file system path not mongo path Also Your Model need data ,contenttype,description fields

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

But req.file does not contains it on same key so please create new json with key mapping

More Info : https://github.com/expressjs/multer

Answer 2

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