ionic cordova一次上传多张图片（类似input file提交表

在Ionic Cordova应用中，如何实现一次上传多张图片的功能呢？就像我们提交表单时上传文件一样。这是一个非常实用的功能，对于开发者来说，具有很高的参考和借鉴价值。

我们可以通过Cordova提供的插件方便地调用摄像头或图库选择图片进行上传。按照Cordova官方的方法，每次选择完图片后就要直接上传，这样的用户体验并不理想。更好的做法是让用户选择完图片后，能在本地预览，然后对于不需要的图片进行删除，最后确认无误后再一次性上传所有图片。遗憾的是，Cordova本身并不支持这种操作方式。那么，我们如何实现这个功能呢？下面是我的方法。

我们可以通过调用$cordovaImagePicker.getPictures()方法打开图库，获取图片的URL地址。相机的工作原理也与之类似。当用户选择完图片后，我们可以遍历这个图片URL列表，对于每一张图片进行本地预览和处理。

以下是代码示例：

```javascript

$cordovaImagePicker.getPictures(options).then(function(imageURI) {

for(var i=0; i

previewAndStoreImage(imageURI[i]);

}

}, function(err) {

if (err.message && (err.message.toString()dexOf('cancelled') < 0)) {

$scope.popTips('打开失败','打开图片遇到问题');

}

});

```

关键的部分在于如何处理这些图片URL。我们需要将这些URL转化为二进制流，并存储在本地。这个过程可以通过以下函数实现：

```javascript

function previewAndStoreImage(imageURI){

window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {

fileEntry.file(function(file) {

var reader = new FileReader();

reader.onloadend = function(e) {

// 将图片路径转换为二进制流，并指定类型为图像格式（如JPEG）

var the_file = new Blob([e.target.result], { type: "image/jpeg" });

// 存储图片二进制流到本地

CacheData.setImgFileList(the_file);

// 同时存储图片URL用于预览

CacheData.setImageURIList(imageURI);

};

reader.readAsArrayBuffer(file);

}, function(e){$scope.errorHandler(e)});

}, function(e){$scope.errorHandler(e)});

}

```

在这个函数中，关键的一步是创建Blob对象，将图片的URL转化为二进制流。然后，我们使用预先定义好的方法CacheData.setImgFileList()和CacheData.setImageURIList()将二进制流和图片URL存储起来。需要注意的是，Blob对象并不兼容低版本的安卓系统。所以在进行开发时需要注意兼容性问题。通过这样的处理，我们就可以实现一次上传多张图片的功能了。优化后的文章如下：

图片操作如此简单：一推一删，轻松掌握！提交时，只需将这些参数添加到新的FormData中即可。示例代码如下：

```javascript

let formDataByImage = new FormData();

for(var i=0; i < CacheData.getImgFileList().length; i++){

formDataByImage.append("files", CacheData.getImgFileList()[i],"images.jpg");

}

// 下面是表单参数

formDataByImage.append("tenantId", 1);

formDataByImage.append("facilityIdentify", "217ae60e5bc746f");

//formDataByImage.append("nodeName", nodeName); 根据实际需要选择是否添加该参数

formDataByImage.append('sessiontoken', formData.sessiontoken);

formDataByImage.append('method', 'fax.upload');

```

后台接收方法与通过input file提交表单类似，这里不再赘述。

接下来，让我们深入了解Ionic和Cordova的区别。在狼蚁网站的SEO优化过程中，许多朋友对Ionic的基础教程学习后，仍对Ionic和Cordova的关系感到困惑。

Ionic是一个基于Html5的移动App开发框架，特别是为AngularJS提供移动端解决方案。Ionic以跨平台移动app开发框架phoengap为蓝本，让开发者能够通过简单的命令行工具快速生成Android和iOS移动app应用。

而PhoneGap是一个创建移动跨平台应用程序的快速开发平台，它使用HTML、CSS和JavaScript作为基础。PhoneGap使开发者能够利用各种智能手机的核心功能。

通俗地讲，Ionic是一款基于AngularJS的HTML5移动app开发框架，而PhoneGap是一个可以打包JS并调用原生功能的移动app框架。即使不通过命令安装Ionic，也可以使用Ionic进行app开发。可以把Ionic视为一个HTML5移动app框架，而PhoneGap/Cordova则作为打包并调用原生的框架。

至于Ionic为什么也可以打包，那是因为Ionic的打包插件是基于PhoneGap/Cordova的。

长沙网络推广给大家介绍了Ionic和Cordova一次上传多张图片（类似input file提交表单）的实现方法，希望对大家有所帮助。如果大家有任何疑问，请留言，长沙网络推广会及时回复。在此，也感谢大家对狼蚁SEO网站的支持！让我们一起期待更多技术分享和经验交流。