我正在尝试使用 multer(express.js 服务器端和 Angular 客户端)上传图片。由于某种原因,我不断收到一个空的 formData 数组,这是日志: 现在是代码: 服务:
AddPicture(formdata: any){
return this.http.post<any>(environment.api + "products/add-image",{
formdata
})
}
ts 代码:
onFileSelected(event:any){
if(event.target.files.length > 0){
this.selectedFile = event.target.files[0]
this._images = this.selectedFile;
}
}
AddImage(){
const formdata = new FormData();
formdata.append('file', this._images)
console.log(formdata)
this._product.AddPicture(formdata).subscribe(
(data:any) => {
console.log(data)
},
(error:any) => console.log("error trying to add new image")
)
}
HTML:
<form>
<input type="file" name="image" multiple (change)="onFileSelected($event)" />
<button type="submit" (click)="AddImage()">upload</button>
</form>
API
const storage = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, "upload");
},
filename: (req, file, callback) => {
callback(
null,
`${file.fieldname}-${file.name}` + path.extname(file.originalname)
);
},
});
var upload = multer({ storage: storage }).single("myImage");
router.post("/add-image", (req, res) => {
upload(req, res, (err) => {
if (err) {
console.log(err);
} else {
console.log(req.file);
}
res.send(file);
});
});