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

我们可以通过cordova提供的插件调用摄像头或图库选择需要的图片上传，按cordova官方的方法，每次选择完后就直接上传，这并不符合用户的习惯，最好的用户习惯是用户选择完需要的图片，并可在本地预览，接着用户再次打开摄像头或图库再次选择图片，接着预览，对于不需要的图片删除，最后确定可以后，再一次性上传所有图片。显然这种方式，cordova是不支持，那要如何实现呢，以下是我的方法：

通过调用$cordovaImagePicker.getPictures该方法打开图库，获得图片的URL地址，ps:相机原理相同

?

1 2 3

$cordovaImagePicker.getPictures(options).then(function(imageURI) {        for (var i= 0 ; i<imageuri.length; if = "" err.message= "" pre= "" >

上面方法可以获得一组图片地址列表，接下来要做的就是把这些图片转成二进制流存储在本地，如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function rLFSURL(imageURI){      window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {          fileEntry.file(function(file) {              var reader = new FileReader();              reader.onloadend = function(e) {                  //需要将图片路径转换为二进制流，并且指定类型为图像格式（还有其他格式，如文本格式等等）                  var the_file = new Blob([e.target.result ], { type: "image/jpeg" } );                  //存储图片二进制流                  CacheData.setImgFileList(the_file);                  //存储图片地址用于预览                  CacheData.setImageURIList(imageURI);              };              reader.readAsArrayBuffer(file);          }, function(e){$scope.errorHandler(e)});      }, function(e){$scope.errorHandler(e)}); }

上面的关键是var the_file = new Blob([e.target.result ], { type: "image/jpeg" } );，这是将图片转化为二进制，然后我用事先定义好的方法CacheData.setImgFileList()和CacheData.setImageURIList()把转化后的二进制流及图片存储起来。主意new Blob()方法并不兼容低版本的安卓系统。

如果再增加图片，我们只需要把他push进我们的数组里即可，删除的话就splice(index, 1)掉，这样待用户操作完后，点提交，我就把这些参数append进new FormData()里就OK了，如下

?

1 2 3 4 5 6 7 8 9

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' );