OpenAPI-Generator实现的多文件上传Multipart请求400错误排查求助

问题根因 #

你的接口调用方式没有问题，该错误是OpenAPI Generator的TypeScript代码生成模板的固有缺陷导致的。

你的OpenAPI 3.0多文件上传接口定义完全符合官方规范：multipart/form-data请求体下，类型为array、子项为type: string + format: binary的参数，就是对应前端的Array<Blob/File>类型多文件入参。

缺陷的核心逻辑问题是：OpenAPI Generator当前的大部分TypeScript模板（包括typescript-fetch、typescript-axios等主流模板），在处理multipart/form-data请求的二进制类型数组参数时，错误地将其等同于普通字符串数组处理，直接调用join方法拼接为字符串后追加到FormData中，最终就会出现你观测到的[object File],[object File]这种无效字符串，浏览器无法识别为二进制文件，后端自然返回400错误。

而单文件上传场景下参数是单个二进制类型，模板逻辑会直接将其追加到FormData，符合浏览器的FormData规范，因此可以正常工作。

修复方案 #

正确的多文件参数追加逻辑应为遍历数组，将每个文件单独追加到FormData的同名字段下：

if (requestParameters.images) {
    requestParameters.images.forEach(file => {
        formParams.append('images', file);
    })
}

你可以根据自己的使用场景选择以下任意一种修复方式：

• 临时修复：直接修改生成后的API请求代码，将原有的join逻辑替换为上述遍历追加逻辑即可立刻生效。
• 永久修复：自定义OpenAPI Generator的TypeScript模板，修改multipart参数处理的相关逻辑，后续生成代码时会自动输出正确的处理逻辑，无需每次手动修改。
• 工具升级：如果使用的是旧版本生成器，可以升级到最新稳定版，部分新版本模板已经针对该问题做了兼容修复；也可以切换为其他对多文件上传支持更完善的OpenAPI TypeScript代码生成工具。

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