如何解决Axios POST请求中图片显示为[object Object]的问题？

前端代码问题修复 #

• 移除错误的重复文件追加逻辑：
  你代码里的这段循环存在两处错误——既重复添加文件，又把整个数组作为值传入，直接删掉即可：

  images.forEach((i) => {
      data.append('images', images)    
  })
  

  若需要手动添加表单外的文件，应改为追加单个文件：

  images.forEach((file) => {
      data.append('images', file)    
  })
  

• 删除手动设置的Content-Type：
  axios发送FormData时，浏览器会自动生成带boundary参数的multipart/form-data请求头，手动设置会丢失这个关键参数，导致后端无法正确解析文件。修改后的请求代码：

  axios.post("http://localhost:8080/api/v1/user", data)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
  

后端代码问题修复 #

• 正确打印与返回文件信息：
  req.files.images是文件对象（多文件上传时为数组），直接在模板字符串中拼接会调用toString()，返回[object Object]。要查看详细信息，可直接用console.log打印（Node.js会输出完整对象结构），或转为JSON字符串返回：

  let images = req.files.images;
  // 控制台打印完整文件结构
  console.log('文件详情:', images);
  // 返回给前端时格式化输出
  res.send(`你的图片信息：\n${JSON.stringify(images, null, 2)}`);
  

• 兼容单/多文件上传场景：
  若前端允许上传多个文件，req.files.images会是数组；单个文件则为对象，建议统一转为数组处理：

  app.post('/api/v1/user', v1, (req, res) => {
    let images = req.files.images;
    // 统一转为数组，兼容单/多文件情况
    const imageList = Array.isArray(images) ? images : [images];
    // 遍历输出每个文件的关键信息
    imageList.forEach(img => {
      console.log(`文件名：${img.name}，大小：${img.size}字节`);
    });
    res.send(`成功上传 ${imageList.length} 个文件`);
  });
  

额外排查步骤 #

• 检查前端表单的file输入框：若需多文件上传，需设置multiple属性，且name属性必须为images，与后端接收字段名一致。
• 用浏览器开发者工具查看Network面板，确认请求Payload中是否正确包含文件数据（可查看FormData里的文件项）。

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