Orval项目中处理PHP后端文件数组上传的技术方案

2025-06-17 08:37:07作者：裘晴惠Vivianne

orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. 🍺

项目地址：https://gitcode.com/gh_mirrors/or/orval

背景介绍

在前后端分离的开发模式中，使用OpenAPI规范定义接口并通过代码生成工具自动创建客户端代码已成为提高开发效率的重要手段。Orval作为一款优秀的OpenAPI客户端代码生成工具，能够根据API定义自动生成TypeScript类型和请求方法。然而，在处理PHP后端接收的文件数组上传时，开发者可能会遇到一些兼容性问题。

问题分析

PHP后端在处理文件数组上传时，要求表单字段名必须包含[]后缀（如files[]），这样才能正确识别为数组类型。而Orval默认生成的表单数据代码会直接使用字段名（如files），导致PHP后端无法正确解析为数组。

这个问题源于PHP处理多文件上传的特殊机制。PHP要求表单字段名必须明确标识为数组，而其他后端技术（如.NET）可能不需要这种特殊标记，甚至可能不支持这种命名方式。

解决方案

方案一：修改OpenAPI定义

最直接的解决方案是在OpenAPI定义中直接为数组字段添加[]后缀：

properties:
  files[]:
    type: array
    items:
      type: string
      format: binary

这种方法的优点是简单直接，但缺点也很明显：

字段名中的[]会在生成的TypeScript类型中出现，可能影响代码可读性
如果同一API定义也用于其他后端技术，可能造成兼容性问题

方案二：使用FormData Mutator

Orval提供了自定义表单数据处理的能力，可以通过配置覆盖默认的FormData生成逻辑：

创建自定义FormData生成器：

export const customFormData = <Body extends Record<string, any>>(
  body: Body,
): FormData => {
  const formData = new FormData();
  
  Object.entries(body).forEach(([key, value]) => {
    if (Array.isArray(value)) {
      value.forEach(entry => formData.append(`${key}[]`, entry));
    } else {
      formData.append(key, value);
    }
  });
  
  return formData;
};

在Orval配置中指定使用自定义生成器：

output: {
  override: {
    formData: {
      path: "./path-to/form-data-mutator.ts",
      name: "customFormData"
    }
  }
}

这种方案的优点在于：

保持API定义的整洁性
只影响PHP相关的项目
可以灵活处理各种特殊情况
不影响其他非PHP后端的兼容性

最佳实践建议

项目评估：首先评估项目是否仅面向PHP后端，如果是，可以考虑直接修改API定义；如果需要考虑多后端兼容性，则推荐使用FormData Mutator方案。
团队协作：在团队开发环境中，应在项目文档中明确记录这种特殊处理，避免其他开发者困惑。
类型安全：如果使用FormData Mutator方案，建议添加类型守卫确保运行时类型安全：

if (Array.isArray(value)) {
  value.forEach(entry => {
    if (entry instanceof Blob || typeof entry === 'string') {
      formData.append(`${key}[]`, entry);
    }
  });
}