Angular上传文件至Node.js报无法读取undefined的mimetype错误

问题描述 #

使用Angular作为前端、Node.js作为后端实现CSV文件上传功能时，Postman调用Node.js上传接口可正常运行，但Angular前端发起文件上传请求时，后端抛出如下错误：

cannot read properties of undefined(reading mimetype)

经初步验证，问题大概率出在Angular侧代码。

现有实现代码 #

Node.js端代码 #

class UploadController{
   uploadCsv = async(req,res,next)=>{
   console.log('i am in controllr');
   console.log(req.file.mimetype);
  try{
      if(req.file==undefined){
      return res.status(400).send("Please upload a csv file!");
     }
     await FileService.uploadCSV(req,res);
     return res.status(200).send({
      message: 
       "Uploaded the file successfully: "+req.file.originalname
   });
})

Angular端代码 #

uploadmyFile(fileUpload:File){
   const httpOptions = {
   headers: new HttpHeaders({
   'Content-Type':'text/csv',
   Authorization: `Bearer ${this.userDetails.token}`,
   user_id : this.userDetails.user_id,
   }),
   params: new HttpStatus({
    fromObject :{
     user_id: this.userDetails.user_id,
   },
   }),
  };
let fromData: FormData = new FormData();
formData.append('fileKey', fileUpload,fileToUpload.name);
return this.http.post<any>(
 'http://localhost:3000/upload?file',
 formData,
 httpOptions
  );
}

问题原因 #

报错本质是后端拿不到上传的文件对象req.file，读取mimetype属性时触发undefined错误，具体诱因有4个：

• Angular侧手动设置了错误的Content-Type请求头：上传FormData格式数据时，不需要手动指定Content-Type，Angular会自动生成带分隔符标识的multipart/form-data请求头，手动设置为text/csv会导致后端文件解析中间件（比如multer）无法识别上传内容，拿不到文件。
• Angular代码存在多处拼写/API调用错误：
  • 声明FormData实例时变量名写为fromData，后续append操作调用的是formData，运行时会直接触发变量未定义错误
  • 追加文件到FormData时，第三个文件名参数用了未定义的变量fileToUpload.name，函数入参名实际为fileUpload，变量名不匹配
  • 构造查询参数时错误使用了HttpStatus类，Angular中构造URL查询参数应该用HttpParams
• 请求URL末尾多余的?file无实际意义，可能干扰后端路由匹配和文件解析逻辑
• Node.js侧代码逻辑顺序错误：先执行console.log(req.file.mimetype)读取属性，之后才判断req.file是否存在，哪怕前端传参异常，也会直接抛错，走不到后续的400返回逻辑。

修复方案 #

1. 调整Angular侧代码：
   • 移除请求头中手动设置的'Content-Type':'text/csv'配置，保留Authorization、user_id头即可
   • 修正所有拼写错误：FormData变量名统一为formData，append文件时文件名取fileUpload.name，查询参数改用HttpParams实例化
   • 删除请求URL末尾多余的?file，接口地址保持为http://localhost:3000/upload
2. 调整Node.js侧代码：把req.file的非空判断移到所有读取req.file属性的逻辑之前，避免属性读取报错。

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