Cordova 11下如何使用cordova-plugin-file实现文件上传？

由于cordova-plugin-file-transfer已被废弃，在Cordova 11中我们可以通过cordova-plugin-file搭配cordova-plugin-camera来实现图片上传功能，以下是完整实现步骤：

一、安装所需插件 #

首先安装两个核心插件：

• cordova-plugin-camera：用于从相册选择图片
• cordova-plugin-file：用于处理本地文件操作

执行安装命令：

cordova plugin add cordova-plugin-camera cordova-plugin-file

二、实现步骤与代码示例 #

1. 从相册选择图片 #

使用camera.getPicture方法唤起相册选择图片，获取图片的本地URI：

function selectImageFromGallery() {
    const options = {
        quality: 80, // 图片质量（0-100）
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY, // 指定从相册选择
        destinationType: Camera.DestinationType.FILE_URI, // 返回文件URI
        encodingType: Camera.EncodingType.JPEG,
        mediaType: Camera.MediaType.PICTURE
    };

    navigator.camera.getPicture(onImageSelected, onImageSelectError, options);
}

function onImageSelected(imageUri) {
    // 图片选择成功，接下来处理文件上传
    uploadImageToServer(imageUri);
}

function onImageSelectError(error) {
    console.error('图片选择失败:', error);
}

2. 读取本地图片文件并上传 #

通过cordova-plugin-file的resolveLocalFileSystemURL解析图片URI，获取文件对象后，将其转换为Blob并通过FormData上传至服务器：

function uploadImageToServer(imageUri) {
    // 解析本地文件URI
    window.resolveLocalFileSystemURL(imageUri, function(fileEntry) {
        fileEntry.file(function(file) {
            const reader = new FileReader();
            
            reader.onloadend = function() {
                // 将读取的文件转为Blob对象
                const blob = new Blob([this.result], { type: file.type });
                // 创建FormData，用于表单上传
                const formData = new FormData();
                formData.append('uploaded_image', blob, file.name);
                
                // 发送POST请求到服务器
                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'https://你的服务器上传接口地址', true);
                
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        console.log('图片上传成功:', xhr.responseText);
                        alert('上传完成');
                    } else {
                        console.error('上传失败，状态码:', xhr.status);
                        alert('上传失败');
                    }
                };
                
                xhr.onerror = function() {
                    console.error('网络请求错误');
                    alert('网络异常');
                };
                
                xhr.send(formData);
            };
            
            // 以ArrayBuffer格式读取文件
            reader.readAsArrayBuffer(file);
        }, function(error) {
            console.error('获取文件对象失败:', error);
        });
    }, function(error) {
        console.error('解析文件URI失败:', error);
    });
}

3. 调用入口 #

在页面中添加触发按钮，绑定选择图片的方法：

<button onclick="selectImageFromGallery()">从相册选择图片并上传</button>

三、注意事项 #

• 确保服务器端接口支持multipart/form-data类型的文件上传，并正确处理名为uploaded_image的文件字段
• 针对Android/iOS平台，需在config.xml中配置相应的权限：
  • Android：添加<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />和<uses-permission android:name="android.permission.INTERNET" />
  • iOS：在info.plist中添加NSPhotoLibraryUsageDescription说明相册访问权限用途

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