如何在Nuxt3的TypeScript中用一次useFetch提交表单数据与文件

核心思路 #

手动构建符合后端解析要求的FormData，将数字、数组转换为后端可识别的字符串格式（避免JSON转换），同时保留文件上传能力，既满足TypeScript类型约束，又不用修改后端逻辑。

实现步骤 #

1. 编写FormData构建工具函数
   处理不同类型的数据，转换为FormData支持的格式：

   const buildFormData = (data: Record<string, any>): FormData => {
     const form = new FormData();
     for (const key in data) {
       const value = data[key];
       if (value === null || value === undefined) continue;
   
       // 处理数组：根据后端解析规则选择方式
       if (Array.isArray(value)) {
         // 方式1：重复key（适用于多数后端框架，如Express extended模式）
         value.forEach(item => form.append(key, String(item)));
         // 方式2：key[]格式（适用于Laravel、Django等）
         // value.forEach(item => form.append(`${key}[]`, String(item)));
       } 
       // 处理数字：转为字符串
       else if (typeof value === 'number') {
         form.append(key, String(value));
       } 
       // 处理文件：直接添加
       else if (value instanceof File) {
         form.append(key, value);
       } 
       // 其他类型（字符串、布尔值等）统一转字符串
       else {
         form.append(key, String(value));
       }
     }
     return form;
   };
   

2. 用useFetch发送请求
   直接将构建好的FormData作为请求体，无需手动设置Content-Type（浏览器会自动添加包含boundary的正确头部）：

   // 示例表单数据
   const formData = {
     username: 'hazadus',
     age: 25,
     hobbies: ['coding', 'hiking'],
     avatar: document.querySelector('#avatar-input').files[0]
   };
   
   const { data, error } = await useFetch('/api/submit', {
     method: 'POST',
     body: buildFormData(formData),
     // 可选：添加请求拦截或其他配置
   });
   

关键说明 #

• TypeScript类型问题解决：通过将数字、数组转为字符串，完全符合FormData.append()的参数类型约束，不会触发类型错误。
• 后端兼容性：采用常规表单提交的数组格式（重复key或key[]），后端无需修改即可正常解析（只要后端原本支持表单数组的解析逻辑）。
• 文件上传正常：File对象直接添加到FormData，保留multipart/form-data的文件上传能力。

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