使用GridFS将角度上传文件到mongoDB用户集合

问题描述

我目前正在开发MEAN Stack网络应用，该应用应允许用户将其文件上传到数据库。我一直在尝试使用multer + gridfs-stream以及multer-gridfs-storage，但无济于事。这是我目前拥有的。

// user.component.html

<form [formGroup]="fileUpload">
  <input type="file" id="myFile" formControlName="file">
  <button (click)="upload()">upload</button>
</form>

// user.component.ts

ngOnInit(){  

this.fileUpload = this.formBuilder.group({
      file: ['',Validators.required]
    });
}

upload() {
    this.useRSService.upload(this.fileUpload.value.file).subscribe(result => {
      console.log(result);
    })
  }

// user.service.ts （这是将我的客户端连接到服务器端的代码）

  upload(file) {
    return this.http.post('./api/upload',file)
  }

// api.js

const express = require('express');
const router = express.Router();
const MongoClient = require('mongodb').MongoClient;
const crypto = require('crypto');

const GridFsstorage = require('multer-gridfs-storage');
const Grid = require('gridfs-stream');
const path = require('path');
const multer = require('multer');
const url = "my_mongo_uri";

var db;

//init gfs
let gfs;

MongoClient.connect(url: url,{ useNewUrlParser: true },{ useUnifiedTopology: true },(err,database) => {
    if (err) return console.log(err)
    db = database.db('insurance_app');
    gfs = Grid(db,MongoClient);
    gfs.collection('uploads');
});



// Create a storage object with a given config
const storage = new GridFsstorage({url,file: (req,file) => {
    return new Promise((resolve,reject) => {
        crypto.randomBytes(16,buf) => {
            if (err) {
                return reject(err);
            }
            const filename = buf.toString('hex') + path.extname(file.originalname);
            const fileInfo = {
                filename: filename,bucketName: 'uploads'
            };
            resolve(fileInfo);
        });
    });
}});

const upload = multer({ storage });



// the endpoint that I am calling
router.post('/upload',upload.single('file'),(req,res) => {
    res.json({file: req.file})
    console.log({file: req.file})
})

但是，每当我运行代码时，来自终端的console.log都会返回我{file: undefined}。我已经提供了代码，因为它是我所能找到的最接近有效解决方案的代码。

解决方法

您的upload服务功能应为

upload(file) {
  const data = new FormData();
  data.append('file',file);
  return this.http.post('./api/upload',data);
}

当您编写upload.single('file')时，这意味着服务器希望接收到一个名为'file'的字段的请求，并且该字段的值是实际文件。

这就是您写data.append('file',file);时发生的情况，其中第一个参数是字段名称，第二个参数是您将发送的值（在这种情况下为文件）。

Angular知道FormData的值必须编码为multipart/form-data，这是唯一的格式multer知道如何按照库描述中的说明进行处理：

用于处理multipart/form-data的Node.js中间件

, 正在将

{file: undefined}打印到控制台，因为您正在打印console.log({file: req.file}而不是console.log({file: req.body.file})。这将为您提供所需的文件名。