文件上传时API请求Payload显示[object File]如何解决

请求里文件字段显示[object File]是因为FormData.append()的传值不符合要求：该方法只支持传入字符串、Blob、File类型的值，你直接把存储File对象的数组整体传入时，方法会自动对入参执行toString()转换，File对象转字符串的结果就是[object File]，自然无法被后端识别为正常文件流。

• 直接修改React state：SubmitAward方法里直接用push修改this.state.awarddata属于React官方不推荐的反模式，直接修改原state不会触发组件重渲染，还可能引发状态不一致问题，必须通过setState更新状态。
• Token头格式错误：Authorization字段的Bearer格式要求令牌和前缀间有空格，你写的"Bearer" + UserToken拼接后没有空格，会导致后端鉴权失败。
• 多值字段传参错误：不管是多文件还是多文本值，都不能直接把数组append到FormData的单个字段下，后端无法识别这种格式。

1. 修正奖项提交方法，不要直接修改state：

SubmitAward() {
  const awardValue = {
    title: this.state.awardTitle,
    award_img: this.state.document,
  };
  this.setState(prevState => ({
    awarddata: [...prevState.awarddata, awardValue]
  }));
}

2. 修正接口请求逻辑，逐个追加FormData字段，修复请求头格式：

instructor_register() {
  const UserToken = localStorage.getItem("UserToken");
  const formdata = new FormData();
  formdata.append("first_name", this.state.firstname);

  // 遍历奖项数据，逐个追加名称和文件，同名字段多次append后后端会自动识别为数组
  this.state.awarddata.forEach((item) => {
    formdata.append("instructor_award_name", item.title);
    formdata.append("instructor_award_img", item.award_img);
  });

  axios({
    method: "post",
    url: `${API_AUTH_URL}instructor-register`,
    data: formdata,
    headers: { 
      Authorization: `Bearer ${UserToken}`
      // 不要手动设置Content-Type，让axios自动生成带boundary的multipart/form-data头
    },
  })
  .then((response) => {
    console.log("response.....", response.data);
  })
}

补充提示：手动给FormData请求设置Content-Type: multipart/form-data是常见错误，会丢失请求必须的边界标识（boundary），导致后端解析文件失败，直接让axios自动处理请求头即可。

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