FormData调用append后打印为空对象无键值对问题

问题1：控制台打印FormData显示为空对象 #

• 这不是append操作失效，是FormData本身属于浏览器提供的特殊接口，内部存储的键值对不可被console.log直接枚举展示，属于正常现象。
• 校验FormData是否写入成功的正确方式：

// 遍历FormData所有条目查看内容
for (const [fieldKey, fieldValue] of formData.entries()) {
  console.log('字段名：', fieldKey, '字段值：', fieldValue);
}

问题2：代码本身存在的上传逻辑错误 #

你的现有代码即使FormData构造正确也无法正常上传，存在三个明显问题：

• 构造完的formData没有传入请求配置，实际发请求时传的是解构排除了document字段的普通对象data，文件字段完全没被带上
• 要注意append到FormData的文件必须是原生File/Blob类型实例，你当前打印的document如果是自己手写的普通对象、不是文件选择器拿到的原生File对象，即使append进去也无法被服务端正常识别
• 用axios发送FormData请求时，不要手动设置Content-Type: application/json请求头，也不要手动写死multipart/form-data，让浏览器自动识别请求体类型、自动生成带分隔符boundary的合法请求头即可

修正后可直接使用的代码 #

export class FinancialDocumentsController {
  constructor(private requestWithToken: <T>(config: AxiosRequestConfig) => Promise<AxiosResponse<T>>) {}
  
  public createFinancialDocumentsFilesUpload = ({ document, ...data }: CreateFinancialDocumentsFilesUploadReq) => {
    // 前置校验文件类型合法性
    if (!(document instanceof Blob)) {
      throw new Error('document必须为File/Blob类型的合法文件对象');
    }

    const formData = new FormData();
    formData.append('document', document);
    
    // 将其余业务字段同步写入FormData
    Object.entries(data).forEach(([key, value]) => {
      formData.append(key, typeof value === 'string' ? value : JSON.stringify(value));
    });

    return this.requestWithToken<CreateFinancialDocumentsFilesUploadRes>({
      method: 'POST',
      url: FINANCIAL_DOCUMENTS_FILES_UPLOAD,
      data: formData,
    });
  };
}

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