我来帮你搞定这个问题！你已经完成了调用相机、保存图片并获取本地路径的核心环节，接下来只需要把图片路径传给JavaScript，再通过JS读取图片并上传到服务器即可。下面是分步骤的具体实现：

一、完善Android端代码：将图片路径传给JS回调 #

首先，你需要在MainActivity中补充onActivityResult的逻辑，把获取到的imageFilePath传递给之前约定的JS回调函数：

1. 先添加两个常量（放在类的顶部）：

private static final int REQUEST_IMAGE_CAPTURE = 1; // 补全你之前缺失的请求码
private static final String TAKE_PICTURE_JS_MODULE = "%s('%s');";

2. 完善onActivityResult方法：

@TargetApi(Build.VERSION_CODES.KITKAT)
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data); // 别忘调用super
    if (requestCode == REQUEST_IMAGE_CAPTURE) {
        if(resultCode == RESULT_OK && callbackFunction != null && imageFilePath != null) {
            // 拼接JS回调代码，把图片路径传入
            String jsCallback = String.format(TAKE_PICTURE_JS_MODULE, callbackFunction, imageFilePath);
            
            // 调用JS函数，API 19+推荐用evaluateJavascript（比loadUrl更安全）
            webView.evaluateJavascript(jsCallback, new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    // 可选：处理JS返回的上传结果
                    Log.d(TAG, "JS上传回调结果: " + value);
                }
            });
            
            // 重置变量，避免重复触发回调
            callbackFunction = null;
            imageFilePath = null;
        }
    }
}

二、实现JavaScript端：读取图片并上传到服务器 #

接下来在前端代码中实现takePhotoCallbackFn函数，接收Android传来的图片路径，然后读取图片文件并通过AJAX上传：

function takePhotoCallbackFn(imageFilePath) {
    // 用fetch读取本地file://路径的图片，转成Blob对象
    fetch(imageFilePath)
        .then(response => {
            if (!response.ok) throw new Error('读取图片失败');
            return response.blob();
        })
        .then(blob => {
            // 构造FormData，模拟表单上传
            const formData = new FormData();
            // 从路径中提取文件名，也可以自定义文件名
            const fileName = imageFilePath.split('/').pop();
            formData.append('photo', blob, fileName); // 'photo'对应后端接口的参数名
            
            // 发起POST请求上传到服务器
            fetch('你的服务器上传接口URL', {
                method: 'POST',
                body: formData,
                // 不需要手动设置Content-Type，浏览器会自动处理multipart/form-data
            })
            .then(response => {
                if (!response.ok) throw new Error('上传请求失败');
                return response.json(); // 假设后端返回JSON格式结果
            })
            .then(result => {
                console.log('上传成功:', result);
                alert('照片上传成功！');
                // 这里可以添加上传成功后的UI更新逻辑
            })
            .catch(error => {
                console.error('上传出错:', error);
                alert('照片上传失败，请重试！');
            });
        })
        .catch(error => {
            console.error('读取图片文件出错:', error);
            alert('无法读取拍摄的照片，请重试！');
        });
}

三、关键注意事项 #

• WebView权限配置：你已经设置了setAllowFileAccess(true)，这是JS能访问本地file://路径的必要条件，不要移除。
• FileProvider配置：确保你已经在AndroidManifest.xml中正确配置了FileProvider，并且res/xml/file_paths.xml指向了应用私有存储的Pictures目录（你已经用getExternalFilesDir(Environment.DIRECTORY_PICTURES)保存图片，这个路径是正确的）。
• Android版本兼容：如果需要兼容API 19以下的设备，可以把evaluateJavascript换成webView.loadUrl("javascript:" + jsCallback)，但前者更安全且能接收返回值，优先推荐。
• 存储权限：因为你用的是应用私有外部存储（getExternalFilesDir），不需要申请READ_EXTERNAL_STORAGE或WRITE_EXTERNAL_STORAGE权限，Android 10+的Scoped Storage也不会影响这个路径的访问。

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