使用CapacitorHttp在安卓/iOS发送文件时数据为空问题

核心问题分析 #

1. 手动设置请求头导致解析失败：你手动指定了Content-Type: multipart/form-data和enctype，但CapacitorHttp处理FormData时会自动生成包含boundary的正确请求头，手动覆盖后原生端（Android/iOS）无法识别FormData的分隔边界，导致请求体为空。
2. DOM File对象跨平台兼容性问题：直接使用浏览器DOM的e.target.files[0]构建FormData，在Capacitor的原生WebView环境中可能存在序列化异常，导致文件数据无法正确传递到原生层。
3. uploadFile方法参数误用：之前尝试uploadFile时可能未传入原生可识别的本地文件路径，而是使用了Web端的File对象，导致文件无法被读取。

具体解决方案 #

1. 移除手动设置的Content-Type和enctype头 #

修改请求代码，让CapacitorHttp自动处理multipart请求头：

const { data } = await CapacitorHttp.post({
  method,
  url: encodeURI(getters.getUrlApi + url),
  data: formData,
  headers: {
    'Access-Control-Allow-Credentials': auth
    // 移除Content-Type和enctype配置
  }
})

2. 用Capacitor Filesystem处理文件对象 #

避免直接使用DOM File对象，通过Filesystem插件读取文件后再构建FormData：

import { Filesystem, Directory } from '@capacitor/filesystem';

// 假设通过文件选择器获取到文件的原生URI（如@capacitor/file-picker插件）
const fileUri = e.target.files[0].uri;
const fileInfo = await Filesystem.readFile({
  path: fileUri,
  directory: Directory.Cache // 根据文件实际存储目录调整
});

const formData = new FormData();
// 用Blob重新构建可跨平台识别的文件对象
formData.append('file', new Blob([fileInfo.data], { type: 'application/octet-stream' }), 'your-filename.ext');

3. 正确使用uploadFile方法 #

如果使用uploadFile，需传入原生可访问的文件路径，而非Web端File对象：

const uploadResult = await CapacitorHttp.uploadFile({
  url: encodeURI(getters.getUrlApi + url),
  name: 'file', // 对应后端接收的字段名
  filePath: fileUri, // 原生文件URI
  headers: {
    'Access-Control-Allow-Credentials': auth
  }
});

4. 确保Cookie配置生效 #

在capacitor.config.ts中配置Cookie支持，保证请求携带认证Cookie：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app',
  appName: 'YourApp',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
    cookieDomain: 'your-api-domain.com' // 匹配API的域名
  }
};

export default config;

调试建议 #

• Android端：在build.gradle中添加OkHttp日志拦截器，打印完整请求体，确认FormData是否正确传递
• iOS端：通过Xcode的Network Inspector查看请求详情，检查multipart边界和文件数据是否存在

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