Question

我目前正在开发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, (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

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

Answer 2

正在将

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

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

2 个答案: