如何解决Angular/Node.js（Multer）文件上传后无法获取API返回JSON的问题？

我来帮你搞定这两个核心问题——获取API返回的JSON消息，以及正确传递文件校验状态到上传处理路由中。咱们一步步来：

一、修复Node.js后端：正确返回JSON响应&传递校验状态 #

首先你的Multer文件校验逻辑有小问题，导致错误无法被正确捕获并转化为JSON响应，同时咱们要确保校验状态能传递到上传路由里：

1. 修正Multer的fileFilter错误处理 #

原来的错误传递方式不符合Multer的回调规范，需要用Error对象来传递错误信息，这样后续才能捕获并返回JSON：

// File upload settings 
const PATH = './uploads'; 
let storage = multer.diskStorage({ 
 destination: (req, file, cb) => { 
 cb(null, PATH); 
 }, 
 filename: (req, file, cb) => { 
 cb(null, file.originalname) 
 } 
}); 

// 补充多种常见CSV的MIME类型，避免漏判
const allowedCsvMimeTypes = [
 'application/vnd.ms-excel', 
 'text/csv', 
 'text/comma-separated-values'
];

let upload = multer({ 
 storage: storage, 
 fileFilter: (req, file, cb) => { 
 if (allowedCsvMimeTypes.includes(file.mimetype)){ 
 cb(null, true); 
 } else { 
 // 改用Error对象传递错误，Multer会把这个错误传递到后续中间件
 cb(new Error('Only CSV format allowed!'), false); 
 } 
 } 
});

2. 修正上传路由，捕获错误并返回JSON #

把Multer的中间件包装成Promise，这样就能用async/await捕获错误，然后统一返回JSON格式的响应：

// Post file 
app.post('/upload', async (req, res) => { 
 try { 
 // 包装Multer中间件为Promise，方便捕获错误
 await new Promise((resolve, reject) => { 
 upload.single('fileToUpload')(req, res, (err) => { 
 if (err) reject(err); 
 else resolve(); 
 }); 
 }); 

 // 走到这里说明文件上传&校验都成功
 return res.json({ 
 success: true, 
 message: "File uploaded successfully!" 
 }); 
 } catch (error) { 
 // 处理校验失败或其他上传错误
 return res.status(400).json({ 
 success: false, 
 message: error.message 
 }); 
 } 
});

关于变量传递：你在「文件上传设置」里定义的PATH、storage等变量，在同模块的上传路由里可以直接使用。如果需要获取上传文件的具体信息，比如路径，直接用req.file.path即可（Multer会自动把文件信息挂载到req.file上）。

二、修复Angular前端：获取API返回的JSON消息 #

你之前的onCompleteItem方法没有接收并解析响应内容，现在修改它来获取后端返回的JSON：

ngOnInit() { 
 this.uploader.onAfterAddingFile = (file) => { 
 file.withCredentials = false; 
 }; 
 this.uploader.onCompleteItem = (item: any, response: string, status: number, headers: any) => { 
 // 将后端返回的字符串响应解析为JSON对象
 const uploadResult = JSON.parse(response); 
 console.log('上传结果:', uploadResult); 
 
 // 根据返回结果做UI提示或其他处理
 if (uploadResult.success) { 
 alert(`上传成功：${uploadResult.message}`); 
 } else { 
 alert(`上传失败：${uploadResult.message}`); 
 } 
 }; 
}

另外，建议把HTML里的inputname属性和Angular上传器的itemAlias统一，避免混淆：

<input type="file" name="fileToUpload" ng2FileSelect [uploader]="uploader" accept=".csv, text/csv" /> 

这样调整后，用户上传文件时，前端就能正确获取后端返回的JSON消息，后端也能准确校验文件类型并返回对应状态啦！

内容的提问来源于stack exchange，提问作者Julien