React客户端上传图片：OpenAPI接口应传FormData还是base64字符串？

• OpenAPI TypeScript Generator CLI 的类型生成逻辑不存在错误
• 请求载荷格式不能仅靠生成的类型判断，必须对齐后端接口的实际接收规则，两种传参场景对应不同处理方式

生成器的类型推导完全遵循输入的OpenAPI Schema规则：当前接口定义中file字段明确标注为string($base64)类型，给出的示例值U3dhZ2dlciByb2Nrcw==本身就是标准base64字符串（解码后内容为Swagger rocks），生成器将该参数类型标记为字符串完全符合Schema约定，不存在生成错误。

这里的歧义来自OpenAPI文档本身的不规范写法：

• 按照OpenAPI 3.x标准规范，multipart/form-data 场景下的二进制文件上传，对应字段应该定义为type: string, format: binary，此时生成器会自动将参数类型推导为File/Blob，对应FormData传二进制文件的常规上传逻辑。
• type: string, format: base64（规范中也写作format: byte）原本是用于application/json请求体内嵌二进制内容的场景，极少在multipart表单字段中使用。

场景1：后端实际接收multipart二进制文件（常规文件上传实现） #

该场景属于OpenAPI文档编写错误，误将二进制文件字段的format写为base64，处理方式如下：

1. 构造FormData实例，将用户选择的File对象直接append到file字段，作为请求载荷发送
2. 调用生成的接口函数时可通过类型断言临时绕开string类型校验，也可以修正OpenAPI Schema中file字段的format为binary后重新生成全量接口代码
   参考代码：

const formData = new FormData();
// file 为前端拿到的用户上传File对象
formData.append('file', file);
// 类型断言绕开生成类型的校验
await uploadFile(formData as unknown as UploadFileParams);

场景2：后端要求formdata字段内传输base64字符串 #

该场景下接口定义、生成的类型均与后端逻辑匹配，无需传二进制文件：先将前端拿到的File对象转成纯base64字符串，再将字符串作为file字段的值传入即可。如果接口强制要求multipart/form-data格式，就把转好的base64字符串作为普通字段值append到FormData中发送。
File转base64参考实现：

const fileToBase64 = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      // 移除dataURL前缀，拿到纯base64字符串
      const pureBase64 = (reader.result as string).split(',')[1];
      resolve(pureBase64);
    };
    reader.onerror = err => reject(err);
  });
};

// 调用示例
const base64Str = await fileToBase64(file);
const formData = new FormData();
formData.append('file', base64Str);
await uploadFile(formData);

提示：base64编码会让文件体积增大约1/3，传输效率低于二进制直传，无特殊需求不建议采用这种上传方案。

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