ng-Cordova插件之fileTransfer的使用

其實我以爲gitHub上的文檔說的已經很詳細了，可是鑑因而一個比較經常使用的插件以及貌似使用方法稍微的要比ng-camera那樣看起來簡單點，因此這裏稍微的寫寫記錄下

 

$cordovaFileTransfer的用處：用於文件的上傳和下載，圖片表單等等

$cordovaFileTransfer支持上傳、下載等，這裏咱們暫且說下文件的上傳，此處用圖片舉例

 

需求：拍照、查看、上傳

具體實現：

前端代碼：

<ons-list-item class="list-item-ons" style="padding: 0;margin-top: 0.5em" ng-repeat="picture in pictures" ng-init="index = $index+1">
     <ons-carousel style="height: 3.2em;width: 180%;" swipeable item-width="60%" auto-scroll var="carouselCamear">
         <ons-carousel-item class="list-action-menu">
             <ons-row>
                 <ons-col width="5">
                     <div class="divBorder{{index}}"></div>
                 </ons-col>
                 <ons-col width="10%">
                     <div class="divCircle">
                         <div class="circleValue">{{index}}</div>
                     </div>
                 </ons-col>
                 <ons-col width="40%">
                     <div class="divDate">現場拍照</div>
                 </ons-col>
                 <ons-col ng-click="takePicture($index)">
                     <div class="divImg">
                         <img class="imgValue"
                              src="images/camera.png">
                     </div>
                 </ons-col>
                 <ons-col width="5%" style="text-align: right" ng-if="picture.value">
                     <div class="checkLine"></div>
                 </ons-col>
                 <ons-col ng-if="picture.value" ng-click="checkPic($index)">
                     <div class="check">查看</div>
                 </ons-col>
             </ons-row>
         </ons-carousel-item>
         <ons-carousel-item class="list-action-item">
             <p style="height:60px;background-color: #ffa500;color:white;margin: -10px;padding-left: 11%;line-height: 60px">
                 <ons-icon icon="fa fa-trash-o"></ons-icon>
             </p>
         </ons-carousel-item>
     </ons-carousel>
 </ons-list-item>

這裏用到onsen中的carousel，固然，這裏不需理會主要也就是ng-repeat

$scope.pictures = [
     {value: false, imgSrc: ""},
     {value: false, imgSrc: ""},
     {value: false, imgSrc: ""},
     {value: false, imgSrc: ""},
     {value: false, imgSrc: ""}];

其中在圖片上傳中最主要的是imgSrc

上傳的代碼以下（我這裏是寫在factory裏面，由於能夠共用）：

upLoad:function(imgRul,tempParam,success,error){
     try{
         var options = new FileUploadOptions();
         options.filekey = "file";
         options.fileName = "test.jpg";
         options.mimeType = "image/jpeg";
         options.chunkedMode=false;
         options.params = tempParam;
 
         var fileTransfer = new FileTransfer();
         fileTransfer.upload(
             imgRul,
             encodeURI("http://222.92.140.204:8080/hms-furui/afwkFile/upload"),
             success,
             error,
             options
         );
     }catch(e){
         showAlert('提示',e);
     }
 }

簡明說下里面主要的東西

第一是上傳：

fileTransfer.upload(
     imgRul,
     encodeURI("http://222.92.140.204:8080/hms-furui/afwkFile/upload"),
     success,
     error,
     options
 );

其中第一個參數是圖片在本地的URL地址，第二個參數是service地址，官網文檔是encoded by encodeURI()；固然咱們都知道這裏是爲了防止亂碼。第三個和第四個參數是成功和失敗的回調函數，這些都很簡單，最後一個options貌似有些講究，展開說下：

Options是可選的一些參數，經過var options = new FileUploadOptions()獲取出來（插件封裝好的）

而後填充options中的一些屬性值

一、 fileKey：這個元素的名稱，服務端經過這個拿，個人理解是個key

二、 filename：上傳的文件存在服務端的名稱，默認是image.jpg

三、 httpMethod：顧名思義，http的請求方式，默認是post

四、 mimeType：一種標準，默認的是image/jpeg

五、 params:參數，這裏面放的是一個對象，除了傳過去圖片還有別的一些信息啦，好比id啊啥啥啥亂七八糟的都在這裏，有用！

固然還有別的一些東西貌似咱們也不怎麼用到

 

也就這麼簡單，咱們就能夠實現圖片的上傳了

 

可是很鬱悶，這裏我要實現過個圖片的上傳，說實話我從官網文檔中並無找到怎麼實現過個圖片的上傳，我以爲是能夠的，由於官網有這麼一句話：                                               S！有木有，可是文檔中又有這句話a！有木有！

好了，這些都先不去在乎了吧，我再查查和問問怎麼實現一次傳送多個圖片，目前個人實現方式是（固然也仍是不怎麼完美的）：

//保存上傳圖片
 $scope.upLoad = function () {
     var errorCount = 0;
     var success = function (r) {
         errorCount += 1;
     };//成功的毀掉函數
     var error = function (error) {
         errorCount += 1;
         showAlert('提示', "第" + errorCount + "張圖片上傳失敗！上傳終止！");
         return;
     };
     var tempParam = {
         "document_id": orderId,
         "document_type": orderStatus,
         "created_by": user,
         "url": "pictures"
     };
     for (var i = 0; i < $scope.pictures.length; i++) {
         if ($scope.pictures[i].imgSrc != "") {
             var imgUrl = $scope.pictures[i].imgSrc;
             workOrderFactory.upLoad(imgUrl, tempParam, success, error);
         }
     }
     showAlert('提示', '圖片上傳成功！');
 };

判斷$scope.pictures[i].imgSrc有木有值，有的話，就傳，失敗就中止！如何判斷失敗中止，我這裏加了個變量：errorCount，每次上傳一張的時候就會調用回調函數，error，或者success，我在success裏面每次成功就+1，方便提示第幾張上傳錯誤，在error裏面給出提示信息，而且終止函數的繼續。若是沒有遇到return，則說明圖片都上傳成功了，因此也一樣給出提示信息。

通常我會以爲不會出現錯誤的，由於一點擊保存，就跳出來圖片上傳成功，快到真的不敢相信（我不知道是否是還存在異步的問題，可是至少目前我測試的都是麼有問題的）

 

後續若是還有更好的一次上傳多個圖片的方法會陸續整理。若是有bug也會及時來修改！

 

好吧，暫且說到這裏咯n(*≧▽≦*)n