2023年Cordova Android高级图片选择器：选择、显示与上传问题解决

问题场景 #

环境：Cordova 11、Cordova Android 11
需求：实现图片选择、本地显示及服务器上传操作
问题：使用Cordova Advanced Image picker返回的路径直接用于图片显示时出现异常，且无法通过该URI完成上传。

研究过程 #

1. 确认选择器返回的URI格式：Android 11下该插件返回的是content://开头的内容URI，而非传统的文件路径
2. 排查显示异常原因：Cordova WebView默认无法直接识别content://协议的URI，导致img标签无法加载图片
3. 排查上传失败原因：上传插件（如cordova-plugin-file-transfer）或原生上传逻辑无法直接处理content://URI，需要转换为可访问的文件资源

解决方法 #

1. 将content URI转换为可访问的文件路径/Base64 #

借助cordova-plugin-file插件解析URI，获取文件对象后转换为Base64用于显示，或获取真实文件路径用于上传：

// 假设picker返回的URI为selectedUri
window.resolveLocalFileSystemURL(selectedUri, function(fileEntry) {
    fileEntry.file(function(file) {
        var reader = new FileReader();
        // 转Base64用于图片显示
        reader.onloadend = function() {
            document.getElementById('preview-img').src = this.result;
        };
        reader.readAsDataURL(file);

        // 获取真实文件路径（部分场景可用）
        var filePath = fileEntry.fullPath;
        // 后续可使用filePath进行上传操作
    }, function(error) {
        console.error('获取文件失败:', error);
    });
}, function(error) {
    console.error('解析URI失败:', error);
});

2. 上传处理 #

如果使用cordova-plugin-file-transfer，可直接传入转换后的文件路径；如果使用Fetch API，可将文件对象转为FormData：

// 使用FormData上传示例
fileEntry.file(function(file) {
    var formData = new FormData();
    formData.append('image', file, file.name);

    fetch('你的上传接口地址', {
        method: 'POST',
        body: formData
    }).then(response => {
        console.log('上传成功:', response);
    }).catch(error => {
        console.error('上传失败:', error);
    });
});

3. 权限配置 #

确保在config.xml中配置Android 11所需的存储权限：

<platform name="android">
    <config-file parent="/manifest" target="AndroidManifest.xml">
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="30" />
        <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />
    </config-file>
</platform>

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