ionic cordova一次上傳多張圖片（類似input file提交表單)的實現方法

2019-11-19 18:27:02

字體：大中小

來源：轉載

供稿：網友

我們可以通過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嗎？答案是可以得。