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

Question

我目前正在开发一个 MEAN 堆栈网络应用程序，它应该允许用户将他们的文件上传到数据库。我一直在尝试使用 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, (err, 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}。我提供了我认为最接近有效解决方案的代码。

Answer 1

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

Answer 2

你的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中间件