ts-rest项目中multipart/form-data请求字符串属性被双引号包裹的问题分析

问题背景

在使用ts-rest框架进行文件上传时，开发者发现当使用multipart/form-data内容类型发送请求时，字符串类型的属性会被自动包裹在双引号中。这个问题在使用React Query客户端时出现，而在Swagger中则表现正常。

问题现象

当开发者按照ts-rest的文档实现文件上传功能时，发送的请求体中字符串字段如email和name会被自动加上双引号。例如，发送的"email"字段会变成""email""，导致服务器端解析异常。

技术分析

经过分析，这个问题源于ts-rest框架内部对multipart/form-data请求体的处理机制。框架设计时为了处理非字符串类型的值，采用了JSON序列化的方式，导致所有值都被当作JSON字符串处理，从而被额外添加了引号。

解决方案

目前官方提供了临时解决方案：开发者可以手动创建FormData对象并直接传递给请求体，绕过框架的自动序列化过程。

const onSubmit = () => {
  const formData = new FormData();
  formData.append('email', email);
  formData.append('name', name);
  if (avatar) formData.append('avatar', avatar);
  mutation.mutate({ body: formData });
};

最佳实践建议

1. 对于简单的表单数据上传，建议直接使用原生FormData API
2. 对于复杂场景，可以考虑在服务器端添加对JSON格式字符串的解析逻辑
3. 关注ts-rest框架的更新，未来版本可能会提供更完善的multipart/form-data处理机制

总结

这个问题展示了在API客户端库中处理混合数据类型时的挑战。虽然当前存在workaround，但开发者需要注意这种特殊情况，并在服务器端做好相应的数据验证和解析工作。对于关键业务场景，建议进行充分的测试以确保数据传输的可靠性。