首页 > 解决方案 > 使用nodeJs multer上传单个文件不适用于Angular前端

问题描述

我正在尝试使用 multer 进行单个文件上传。虽然我可以仅使用相关文件夹中的节点手动上传文件,但我无法将它与我的 Angular 前端同步。我在应该上传文件的节点后端文件夹中创建了一个名为 uploads 的文件夹。此外,我需要在表单中上传文件并将其传递给 api,它应该在其中获取文件以及其他参数。

我正在运行的节点后端代码如下:

const multer = require('multer')

const storage = multer.diskStorage({

destination: function(req, file, cb) {

cb(null, './uploads/')

},

filename: function(req, file, cb) {

cb(null, Date.now() + file.originalname)

}

})

const upload = multer({storage: storage})

节点路由代码

app.post(baseUrl+'/create', upload.single('imagePath'), blogController.createBlog);

下面是我的 Angular 组件代码,它不起作用:

selectImage(event) {

if(event.target.files.length > 0){

const file = event.target.files[0];

this.images = file;

}

}

public createBlog(): any {

const formData = new FormData();

formData.append('imagePath', this.images);

let blogData = {

title: this.blogTitle,

description: this.blogDescription,

blogBody: this.blogBodyHtml,

category: this.blogCategory,

imagePath: this.imagePath

} //end blogData

console.log(blogData);

this.blogHttpService.createBlog(blogData).subscribe(...calling the node route)

前端 HTML 代码:

<div>

<input type="file" name="imagePath" (change)="selectImage($event)" />

</div>

标签: node.jsangularfile-uploadmulter

解决方案


推荐阅读