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

Posted 2023-03-07

【中文标题】如何使用 multer 模块将图像上传到 mongodb

【英文标题】：How can I upload an image to mongodb using multer module

【发布时间】：2021-04-07 04:54:07

【问题描述】：

我是 nodeJs 的新手，我正在尝试通过 multer 模块将图像上传到 MongoDB。当我通过邮递员进行测试时，后端服务器 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>

【参考方案1】：

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

这种做法会很快耗尽你的存储空间，查询也会很慢。

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

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

或您的服务器 (https://yousite.com/assets/your_image.jpg)

【讨论】：

尽管我认为最好的方法是使用 AWS S3 之类的存储或本地存储，但如果 MongoDB 是强制性的，OP 可以使用 BinData 格式，如下面的post