如何解决使用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})
。这将为您提供所需的文件名。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。