node.js - 使用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>
解决方案
推荐阅读
- javascript - 登录 Django 网站而不检查 Django 管理站点的用户
- c# - 如何在form2中使用form1中的字符串(如何使它们在每种形式中都可读?)
- php - 数据表隐藏数据网络选项卡
- excel - 更好的 VBA 方式来压缩列表
- django - 将令牌发送到另一个应用程序,然后验证
- excel - Excel - 命名范围中区号的条件格式
- jenkins - 如何在 JENKINS 中拥有依赖参数
- angular - 如何在角度模板中使用 Math.min() 或 Math.max() 语法?
- visual-studio - 我从 Visual Studio 收到一条消息:您处于 90 天评估期的第 xxx 天。您的试用期已过!你必须购买
- javascript - ApexCharts:热图工具提示格式化程序