You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React+Capacitor Android应用文件上传至HTTP服务器时异常中断的问题求助

React+Capacitor Android应用文件上传至HTTP服务器时异常中断的问题求助

我用React结合Capacitor开发了一个原生Android应用,现在碰到了一个特别头疼的文件上传问题:Web版本里用Ant Design的Upload组件上传文件到服务器完全正常,但打包成Android应用后,点击上传文件刚启动就立刻中断了,全程没有任何错误提示,根本没法完成上传流程。

我已经在AndroidManifest里添加了各种相关权限,也尝试调整了MainActivity里WebView的相关设置,但都没能解决问题。下面是我用到的相关代码片段,希望有经验的大佬能帮我排查下问题出在哪?

1. React端Ant Design Upload组件代码

{/* The button for adding files */}
<Upload
  action={`${process.env.REACT_APP_API_URL}/api/Photo?event_id=${event.id}`}
  listType="picture-card"
  showUploadList={false}
  multiple={true}
  onChange={handleUploadChange(event.id)} // Handler for changing the download status
>
  <button style={{ border: 0, background: "none" }} type="button">
    <PlusOutlined />
    <div style={{ marginTop: 8 }}>Add Files</div>
  </button>
</Upload>

2. AndroidManifest.xml配置

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />
    <application
        android:allowBackup="true"
        android:largeHeap="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true"
        android:requestLegacyExternalStorage="true">

        <activity
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation"
            android:name=".MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/AppTheme.NoActionBarLaunch"
            android:launchMode="singleTask"
            android:exported="true">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths"></meta-data>
        </provider>
    </application>

    <!-- Permissions -->
</manifest>

3. Capacitor配置文件

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

const config: CapacitorConfig = {
  appId: 'com.memory.com',
  appName: 'My TimeLines',
  webDir: 'build',

  server: {
    androidScheme: 'http',
  },
  android: {
    allowMixedContent: true,
    webContentsDebuggingEnabled: true,
  },
  plugins: {
    CapacitorHttp: {
      enabled: true,
    },
    CapacitorCookies: {
      enabled: true,
    },
  },
};

export default config;

试过了各种权限配置和Capacitor的相关设置都没解决问题,有没有遇到过类似情况的朋友?或者能帮我分析下可能的原因吗?

备注:内容来源于stack exchange,提问作者Вадим Дементьев

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.14 09:34:29