通过Axios POST请求上传图片失败问题排查求助

嘿，我仔细看了你的代码和问题描述，咱们一步步拆解这个图片上传失败的问题——先给你吃个定心丸：你的文件路径大概率不是问题根源。如果路径无效，Node.js会直接抛出ENOENT（文件不存在）的错误，而不是让请求发出去却没上传成功。真正的问题出在Axios的配置和FormData的处理上，咱们来逐个修正：

核心问题点 #

1. Axios配置结构错误 #

你把请求头放在了config嵌套属性里，但Axios的正确配置是将headers作为顶层参数，这会导致你的multipart/form-data和Authorization头根本没被正确设置，服务器自然无法解析你的表单数据。

2. FormData缺少必要的文件元信息 #

虽然你用了fs.createReadStream读取文件，但没有指定文件名和MIME类型，部分服务器会因为缺少这些信息而拒绝接收文件。

修正后的代码 #

const screenshotPath = path.join(os.tmpdir(), 'screenshot.png');
const bodyFormData = new FormData();

// 补充文件名和MIME类型，帮助服务器识别文件
bodyFormData.append('uploadedFile', fs.createReadStream(screenshotPath), {
  filename: 'screenshot.png',
  contentType: 'image/png'
});

axios({
  method: 'post',
  url: url,
  data: bodyFormData,
  // 把headers移到顶层，并且不要手动设置Content-Type！
  // FormData会自动生成正确的boundary，手动设置会破坏这个逻辑
  headers: {
    ...bodyFormData.getHeaders(), // 关键：用FormData自带的头信息
    Authorization: 'Bearer ' + token
  }
})
.then(response => {
  console.log('上传成功:', response.data);
})
.catch(error => {
  console.error('上传失败:', error.response?.data || error.message);
});

额外排查建议 #

• 确认文件存在：在代码开头加一行console.log('文件是否存在:', fs.existsSync(screenshotPath))，确保输出为true。
• 监听上传进度：可以在Axios配置里加onUploadProgress回调，确认数据是否在传输：

  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`上传进度: ${percentCompleted}%`);
  }
  

• 核对服务器字段名：确认服务器端接收文件的字段名确实是uploadedFile，不少后端会用file或者image作为字段名，字段不匹配也会导致上传失败。

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