Ionic 6-Vue 原生平台文件上传失败问题求助

核心问题分析 #

iOS端的DataCloneError本质是FormData对象在原生WebView环境下无法被正确序列化克隆，通常和请求头配置错误、FormData处理逻辑不兼容原生环境有关。

具体解决步骤 #

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

当前代码手动指定了application/x-www-form-urlencoded，但FormData上传需要的是multipart/form-data类型，且必须包含自动生成的boundary分隔符。手动设置会覆盖自动生成的头，导致原生环境解析失败并触发克隆错误。

修改服务层代码：

async uploadProfilePicture(file: File) {
    const fd = new FormData()
    fd.append('file', file)

    // 移除手动设置的headers，axios会自动添加正确的multipart/form-data及boundary
    await axiosInstance.post(`${serverRoot}/api/image_profiles`, fd)
}

2. 兼容原生环境的FormData构造 #

部分原生WebView对直接添加File对象到FormData支持不佳，可尝试将File转为Blob后再添加，保留文件名信息：

async uploadProfilePicture(file: File) {
    const fd = new FormData()
    // 将File转为Blob，指定类型和文件名
    const blob = new Blob([file], { type: file.type })
    fd.append('file', blob, file.name)

    await axiosInstance.post(`${serverRoot}/api/image_profiles`, fd)
}

3. 检查axios全局拦截器 #

如果项目中配置了axios请求拦截器，需确保不会对FormData进行JSON序列化操作，这会直接破坏FormData结构：

axiosInstance.interceptors.request.use(config => {
    // 仅对非FormData的普通JSON数据进行序列化
    if (!(config.data instanceof FormData)) {
        config.data = JSON.stringify(config.data)
        config.headers['Content-Type'] = 'application/json'
    }
    return config
})

4. 验证原生平台权限与WebView配置 #

• Android：确保AndroidManifest.xml中添加了文件读写权限：

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  

• iOS：确保Info.plist中添加了相册/相机访问权限描述：

  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问相册上传图片</string>
  <key>NSCameraUsageDescription</key>
  <string>需要访问相机拍摄图片</string>
  

• 若使用Capacitor/Cordova框架，检查WebView是否允许FormData的跨域或本地文件访问配置。

5. 增强错误排查 #

在上传方法中添加详细错误捕获，打印完整错误信息帮助定位：

const handleUpload = async (e: any) => {
    try {
        const file = e.target.files[0]
        console.log('待上传文件信息:', file)
        await userHttpService.uploadProfilePicture(file)
        await store.refreshConnectedUser()
    } catch (err) {
        console.error('上传错误详情:', err)
        console.error('错误堆栈:', err?.stack)
    }
}

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