欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ionic cordova一次上传多张图片(类似input file提交表单)的实现方法

程序员文章站 2022-06-29 16:31:05
我们可以通过cordova提供的插件调用摄像头或图库选择需要的图片上传,按cordova官方的方法,每次选择完后就直接上传,这并不符合用户的习惯,最好的用户习惯是用户选择完...

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

通过调用$cordovaimagepicker.getpictures该方法打开图库,获得图片的url地址,ps:相机原理相同

$cordovaimagepicker.getpictures(options).then(function(imageuri) { 
 
  for(var i=0; i<imageuri.length; i++){ 
    rlfsurl(imageuri[i]); 
  } 
 
}, function(err) { 
  if (err.message && (err.message.tostring().indexof('cancelled') < 0)) { 
    $scope.poptips('打开失败','打开图片遇到问题'); 
  }   
}); 

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

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了,如下

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的区别是什么

很多新朋友ionic基础教程都学完了,还是不知道ionic 和cordova 是什么关系

ionic是什么:

ionic(ionicframework)一款开源的html5移动app开发框架,是angularjs移动端解决方案,ionic以流行的跨平台移动app开发框架phoengap为蓝本,让开发者可以通过命令行工具快速生成android ios移动app应用

phoengap是什么?

phonegap是一个用基于html,css和javascript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iphone,android,palm,symbian,wp7,wp8,bada和blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动.

可能有些新手还是不明白,继续往下看:

通俗的讲:ionic是一款基于angularjs的html5移动app开发框架

phonegap就是一款可以打包并且可以让js调用原生的移动app框架

问题来了?

那我不用命令安装ionic 可以使用ionic开发app吗?答案是可以得。

就可以把ionic当作一款html5 移动app框架,把phonegap/cordova 当作打包 并且调用原生的框架就可以了

至于:为什么ionic也可以打包,上面也说了,ionic的打包插件是基于phonegap/cordova的.

以上所述是小编给大家介绍的ionic cordova一次上传多张图片(类似input file提交表单)的实现方法,希望对大家有所帮助