Angular文件上传报错：POST http://localhost:3000/uploadFile连接被拒绝

这个错误明确表示你的Angular前端无法连接到http://localhost:3000/uploadFile地址，核心原因是目标地址没有运行对应的后端服务，或者服务配置有误。

1. 确认后端服务状态 #

• 检查是否有后端服务（比如Node.js/Express、Spring Boot等）在localhost:3000端口启动运行
  • 如果没有后端服务，需要先搭建并启动对应的文件上传接口服务
  • 如果后端服务已启动，但端口不是3000，需要修改前端请求地址为后端实际使用的端口

2. 修正前端请求地址（如果后端端口不匹配） #

假设后端实际运行在localhost:4000，修改upload-service.ts中的请求地址：

public uploadfile(file: File) {
  let formParams = new FormData();
  formParams.append('file', file)
  // 替换为后端实际的接口地址
  return this.httpClient.post('http://localhost:4000/uploadFile', formParams)
}

3. 验证后端接口路由正确性 #

确保后端服务中存在/uploadFile的POST路由，并且该路由正确处理FormData格式的文件上传请求。比如Node.js/Express的示例（供参考）：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/uploadFile', upload.single('file'), (req, res) => {
  // 处理文件逻辑
  res.status(200).json({ message: 'File uploaded successfully' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

额外优化点（非错误原因，但提升代码规范） #

你的HTML模板中，事件绑定不需要加this.，可以修正为：

<input (change)="onFilechange($event)" class="form-control" type="file" id="formFile">
<button (click)="upload()" type="button" class="btn btn-primary mt-3">Upload</button>

内容的提问来源于stack exchange，提问作者Maryam Chouaïbi