Android WebView图片上传功能失效问题排查求助

嘿，我之前也踩过这个坑！把Rails WebApp转成Android WebView后，文件选择按钮没反应，光加Manifest权限根本不够——WebView本身不会自动处理文件上传的Intent，得手动配置回调才行。下面是我亲测有效的解决方案，一步步来排查：

1. 先确认WebView基础配置是否正确 #

首先要确保WebView启用了JavaScript、DOM存储和文件访问权限，这些是文件上传的基础：

WebSettings webSettings = yourWebView.getSettings();
webSettings.setJavaScriptEnabled(true); // 必须开启，Rails的文件选择按钮大概率依赖JS
webSettings.setDomStorageEnabled(true); // 部分Rails表单会用到本地存储
webSettings.setAllowFileAccess(true);
webSettings.setAllowContentAccess(true);

2. 核心：实现WebChromeClient的文件上传回调 #

这是最关键的一步！WebView不会主动弹出文件选择器，得重写onShowFileChooser方法来处理：

// 全局变量保存回调，避免内存泄漏
private ValueCallback<Uri[]> mFileUploadCallback;
private static final int FILE_CHOOSER_REQUEST_CODE = 10001;

yourWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        // 先清空之前未完成的回调
        if (mFileUploadCallback != null) {
            mFileUploadCallback.onReceiveValue(null);
        }
        mFileUploadCallback = filePathCallback;

        // 构建选择相册的Intent
        Intent pickPhotoIntent = new Intent(Intent.ACTION_GET_CONTENT);
        pickPhotoIntent.addCategory(Intent.CATEGORY_OPENABLE);
        pickPhotoIntent.setType("image/*"); // 只允许选择图片

        // 可选：添加拍照的Intent（如果需要支持拍照上传）
        Intent takePhotoIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        Intent[] extraIntents = new Intent[0];
        if (takePhotoIntent.resolveActivity(getPackageManager()) != null) {
            extraIntents = new Intent[]{takePhotoIntent};
        }

        // 弹出选择器
        Intent chooserIntent = Intent.createChooser(pickPhotoIntent, "选择照片");
        chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, extraIntents);
        startActivityForResult(chooserIntent, FILE_CHOOSER_REQUEST_CODE);

        return true;
    }
});

3. 处理Activity返回的照片结果 #

在你的Activity里重写onActivityResult，把选中的图片Uri传给WebView的回调：

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == FILE_CHOOSER_REQUEST_CODE) {
        Uri[] results = null;
        if (resultCode == RESULT_OK && data != null) {
            // 处理选中的图片Uri
            String imageUriString = data.getDataString();
            if (imageUriString != null) {
                results = new Uri[]{Uri.parse(imageUriString)};
            }
        }
        // 把结果传给WebView，完成文件上传流程
        if (mFileUploadCallback != null) {
            mFileUploadCallback.onReceiveValue(results);
            mFileUploadCallback = null;
        }
    }
}

4. 别忘了动态申请权限（Android 6.0+） #

Manifest里加了权限还不够，Android 6.0以上需要动态申请读写和相机权限（如果支持拍照的话）：

private static final int PERMISSION_REQUEST_CODE = 10002;

// 在WebView初始化前检查权限
private void checkRequiredPermissions() {
    String[] neededPermissions = {
        Manifest.permission.READ_EXTERNAL_STORAGE,
        Manifest.permission.CAMERA // 如果支持拍照上传才需要
    };
    List<String> permissionsToRequest = new ArrayList<>();
    for (String perm : neededPermissions) {
        if (ContextCompat.checkSelfPermission(this, perm) != PackageManager.PERMISSION_GRANTED) {
            permissionsToRequest.add(perm);
        }
    }
    if (!permissionsToRequest.isEmpty()) {
        ActivityCompat.requestPermissions(this, permissionsToRequest.toArray(new String[0]), PERMISSION_REQUEST_CODE);
    }
}

// 处理权限申请结果
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    if (requestCode == PERMISSION_REQUEST_CODE) {
        boolean allGranted = true;
        for (int result : grantResults) {
            if (result != PackageManager.PERMISSION_GRANTED) {
                allGranted = false;
                break;
            }
        }
        if (!allGranted) {
            Toast.makeText(this, "需要权限才能选择照片哦", Toast.LENGTH_SHORT).show();
        }
    }
}

5. 最后检查Rails端的表单配置 #

确保你的Rails文件上传表单设置了正确的enctype，也就是multipart/form-data：

<%= form_with model: @user_photo, html: { multipart: true } do |form| %>
  <%= form.file_field :image, accept: "image/*" %>
  <%= form.submit "上传照片" %>
<% end %>

如果做完这些还是没反应，可以检查下有没有自定义的WebViewClient拦截了点击事件，或者WebView版本过低（尽量用系统自带的WebView，避免第三方WebView的兼容性问题）。

内容的提问来源于stack exchange，提问作者Noor Ali Khan