我在Google上搜索了数小时以找到解决方案,但对我的项目没有任何帮助。我想要一个可以从Angular发送图像并将其存储在Node JS目录中的模块。
我知道这里有问题,因为req.file始终未定义...
这是我的Node JS代码:
const express = require('express');
const app = express();
const multer = require('multer');
const bodyParser = require('body-parser');
const upload = multer({
dest: 'assets/' // this saves your file into a directory called "uploads"
});
app.use(express.static('assets'));
app.use(bodyParser.json());
var cors = require('cors')
app.use(cors())
app.route(requestPath).post((req, res) => {
upload.single('image')
console.log(req.file);
});
我的Angular服务:
addImage( ... , fd){
return this.http.post(requestPath, {
file: fd
})
}
我的角度代码:
selectedFile = null;
imageSelected(event){
this.selectedFile = event.target.files[0];
}
onSubmit(){
const fd = new FormData();
fd.append('image', this.selectedFile, this.selectedFile.name);
this.imageService.addImage( ... , fd).subscribe( _ => {
this.router.navigate(['../'], { relativeTo: this.route });
});
}
我的HTML代码:
<form class="form-horizontal" role="form" [formGroup]="addImage" (ngSubmit)="onSubmit()" id="uploadForm" enctype="multipart/form-data">
<div class="form-group">
<label class="col-lg-3 control-label">Choisissez la photo</label>
<input type="file" id="image" name="image" class="form-control" formControlName="photo" (change)="imageSelected($event)" required>
</div>
非常感谢您能帮助我! 我正在制作照片库,但是如果我不能在上面上传照片,那是没有用的...
答案 0 :(得分:1)
尝试(在Node中)记录需求正文。文件:
app.route(requestPath).post((req, res) => {
upload.single('image')
console.log(req.body.file);
此外,在Angular服务中,定义FormData变量后,将文件和file.name变量注销到控制台,以确保在那里有要发送的数据。这将告诉您问题是在前端还是在节点端。
const fd = new FormData();
console.log("this.selectedFile",this.selectedFile;
console.log("this.selectedFile.name", this.selectedFile.name);
fd.append('image', this.selectedFile, this.selectedFile.name);