如何使用 multer 模块将图像上传到 mongodb

Question

我是 nodeJs 的新手，我正在尝试通过 multer 模块将图像上传到 MongoDB。 当我通过 postman 进行测试时，后端服务器 image.js 工作正常。 但是当我想从前端上传图像时，我不能。 任何可能的建议。

这是 image.js

let express = require("express");
let app =express();
let mongodb = require("mongodb");
let assert = require("assert");
let createClient = mongodb.MongoClient;
let dbUrl = "mongodb://127.0.0.1:27017/images";
let multer = require("multer");


let storage = multer.diskStorage({
    destination:(req,file,cb)=>{
        cb(null,'images');
    },
    filename:(req,file,cb)=>{
        cb(null,file.fieldname+'_'+Date.now()+'.jpg')
    }
});
let upload = multer({storage:storage});

let imageup = express.Router().post('/',upload.single('image'),(req,res)=>{
    createClient.connect(dbUrl,(err,db)=>{
        assert.deepStrictEqual(null,err);
        insertDocuments(db,'images'+req.file.filename,()=>{
            db.close();
            res.json({'message':"file upladed successfully"});
        })
    })
})
let insertDocuments = function(db,filepath,callback){
    let collection = db.collection('users');
    collection.insertOne({filepath:filepath},
    (err,result)=>{
        //.deepStrictEqual(err,result);
        callback(result);
    });
}

module.exports = imageup;

这是 server.js 文件，

let express = require("express");
let app = express();
let port = 8080;
app.listen(port);

app.use('/imageup',require("./image"));

console.log(`server listening to port ${port}`)

这是 service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable({
    providedIn:'root'
})

export class imageupService{
    constructor(public http:HttpClient){}
    public imageupload(data:any):Observable<any>{
        return this.http.post("http://localhost:8080/imageup",data)
    }
}

这是 image.component.ts 文件

import { Component, OnInit } from '@angular/core';
import { HttpErrorResponse } from "@angular/common/http";
import { imageupService } from "../services/imageupservice";
@Component({
  selector: 'imageup',
  templateUrl: './imageup.component.html',
  styleUrls: ['./imageup.component.css']
})
export class ImageupComponent implements OnInit {

  public file:any;
  constructor(public service:imageupService) { }
  public saveimage(data:any){
    this.service.imageupload(data).subscribe((posRes)=>{
      if(posRes.message =="file upladed successfully")
      {
        console.log("File uploaded successfully");
      }
    })
  }

  ngOnInit(): void {
  }

}

这是 HTML 文件

<p>Upload Image</p>
<input type="file" name="image" id="image" [(ngModel)]="file">
<button (click)="saveimage({'filepath':file})">Upload</button>

Answer 1

将图像的二进制文件直接存储在 MongoDB 中是一个非常糟糕的选择。

这种做法会很快耗尽您的存储空间，并且查询会很慢。

Multer 的设计方式允许您将文件上传到本地存储（服务器本身）/远程存储（例如 AWS S3）。 您应该做的是将 URL（用于远程存储）或路径（本地：像任何 static 资产 [css，js]）存储在 MongoDB 中，而不是整个图像。

然后，您应该使用 URL 将页面上的图像渲染到远程存储（例如https://bucketname.s3.region.amazonaws.com/you_image.jpg ）

或您的服务器（ https://yousite.com/assets/your_image.jpg ）