Angular 5文件上传无响应问题排查及解决方法

你这个问题我之前也碰到过，核心原因其实很简单——Angular里由HttpClient返回的Observable是“冷Observable”，意思就是你光定义了请求、调用了.map()还不够，必须主动调用.subscribe()，这个HTTP请求才会真正发出去。你原来的代码里正好漏掉了这关键一步，所以请求根本没执行，自然控制台啥输出都没有。

给你修正后的完整代码，已经加上了必要的订阅逻辑，还有你需要的代码片段：

let body = new FormData();
body.append("file", file, 'thefilename');

// 划重点：这里不需要手动设置Content-Type！Angular会自动处理multipart/form-data的边界
let options: RequestOptions = new RequestOptions();
options.headers = new Headers();

let response: Observable<Response> = this.http.post('http://192.168.1.20:8275/api/upload', body, options);

// 必须订阅Observable，请求才会发起
response.subscribe(data =>{ 
  console.log('data is here: ', data); 
}, err =>{ 
  console.log('error: ', err); 
});

再给你补充几个需要注意的点：

• 关于Content-Type：当你发送FormData时，绝对不要手动设置Content-Type: multipart/form-data，Angular会自动帮你生成带正确边界值的请求头，手动设置反而会让后端的express-fileupload无法正确解析文件。
• 错误处理的写法：你原来的代码里把.map()和错误回调分开写的方式是错误的，正确的做法是把成功回调、错误回调都放在.subscribe()的参数里。
• 检查File对象有效性：确保你传入的file是一个有效的File实例（比如通过<input type="file">的change事件获取到的文件），如果file是undefined或者无效对象，也可能导致请求异常。

另外，你可以再确认下后端的express-fileupload配置，比如是否开启了createParentPath选项（如果需要自动创建上传目录的话），还有CORS配置是否正确——虽然你用HTML表单测试成功了，但Angular的XMLHttpRequest请求可能会有跨域预检请求，确保后端已经处理了CORS。

内容的提问来源于stack exchange，提问作者Oo-_-oO