Web APIを使用したIonicアプリケーションでのファイルアップロード

Question

私の問題は以下の通りです。

私はボードの画像を追加する必要があるWEB APIを与えました。

私は何をしなければなりませんか？

• ユーザーは提出上のユーザーのクリックは、PUTの方法を使用してWeb APIを使用して投稿する必要がありますボード名とボードの画像を入力した場合
• ユーザーがボード
• の名前を追加することができます電話から画像を選択することができすべきです。 |：https://example.com
• のContent-Type：ここでは、以下の

WEB APIの詳細

ヘッダー

• URL WEB APIの詳細ですコンテンツタイプ|
• 方法：

データを配置

• 内容board_id：321
• board_title：|タイトル|
• board_background：|ファイル|

私は、画像を選択するために、cordovaImagePickerプラグインを使用しているし、私は、サーバーにアップロードするに動けなくなります。

私はコードバファイル転送プラグインを使用できますが、画像を保存する場所が指定されていないため、このケースでは役に立たないと思います。すべてのファイル管理はWEB APIによって行われ、データをファイルに書き込むだけです。私が提案することができます

Answer 1

多くの解決策を試した後、私は以下の答えに来ました。

ボード。HTML

<ion-view> 
     <ion-nav-bar class="bar"> 
      <ion-nav-title> 
       <h1 class="title"> 
        Create Board 
       </h1> 
      </ion-nav-title> 
     </ion-nav-bar> 
     <form name="boardForm" ng-submit="addBoard(data)"> 
      <ion-content padding="false" scroll="true" has-bouncing="false"> 
       <div id="form"> 
        <div style="text-align: center; padding-top: 2%; padding-bottom: 2%;"> 
         <div id="image-preview"> 
          <label for="image-upload" id="image-label"><img src="{{ImagePrefix}}/task_plus.png" alt=""/></label> 
          <input type="file" name="board_background" id="image-upload" file-model="data.board_background"> 
         </div> 
         <p>Add Cover</p> 
        </div> 
        <ion-list> 
         <ion-item style="background-color: #F8F8F8;"> 
          <label class="control-label" for="board_name">BOARD NAME</label> 
         </ion-item> 
         <ion-item ng-class="{true:'error'}[submitted && boardForm.board_title.$invalid]"> 
          <input type="text" id="board_name" ng-model="data.board_title" 
            placeholder="Add a Name" name="board_title" required> 

          <p ng-show="submitted && boardForm.board_title.$error.required"> 
           Please enter a board name 
          </p> 
         </ion-item> 
        </ion-list> 
       </div> 
      </ion-content> 
      <ion-footer-bar> 
       <button class="button button-block control-button bottomOfPage" 
         ng-click="submitted = true"> 
        CREATE 
       </button> 
      </ion-footer-bar> 
     </form> 
    </ion-view> 

ディレクティブ

.directive('fileModel', ['$parse', function ($parse) { 
      return { 
       restrict: 'A', 
       link: function (scope, element, attrs) { 
        var model = $parse(attrs.fileModel); 
        var modelSetter = model.assign; 

        element.bind('change', function() { 
         scope.$apply(function() { 
          modelSetter(scope, element[0].files[0]); 
         }); 
        }); 
       } 
      }; 
     }]) 

コントローラ

.controller('ManageBoardCtrl', function ($scope, $http, $ionicPopup, $state, BoardService) { 
      $scope.submitted = false; 
      $scope.data = {}; 
      $scope.addBoard = function(formData) { 
       BoardService.CreateBoard(formData).then(function(response) { 
        if (response === "success") { 
         $ionicPopup.alert({ 
          title: "Success", 
          template: "Board created successfully" 
         }); 
        } 
       }, function (response) { 
        $ionicPopup.alert({ 
         title: "Failed", 
         template: "Somethings wrong, Can not create boards at now." 
        }); 
       }); 
      } 
     }) 

サービス

.service('BoardService', function ($q, $http) { 
      var getUrl = API_URL + "boards"; 

      var createBoard = function (fData) { 
       var formData = new FormData(); 
       formData.append("board_title", fData.board_title); 
       formData.append("board_background", fData.board_background); 

       return $q(function (resolve, reject) { 
        $http({ 
         transformRequest: angular.identity, 
         method: 'POST', 
         url: getUrl, 
         headers: { 'Content-Type': undefined }, 
         data: formData 
        }).success(function (response) { 
         if (response.success === true) { 
          resolve('success'); 
         } else { 
          reject('fail'); 
         } 
        }).error(function() { 
         reject('requesterror'); 
        }); 
       }); 
      }; 

      return { 
       CreateBoard: createBoard 
      }; 
     }) 

アンドロイド/ iPhone用のアプリケーションを配備した後でファイルを選択すると、OSに基づいた閲覧画像が処理されます。リンクの下の

Answer 2

一つの簡単な事、

使っ入力[「ファイル」]タグは、画像を選択します。ファイルオブジェクトと一時URLを取得します。このURLを使用すると、イメージをフォームに表示できます。

次に、formDataを使用してイメージと他のフィールドを追加します。

var fd = new FormData(); 
fd.append('board_background', $scope.image, $scope.image.name); 
fd.append('board_id', 321); 
fd.append('board_title', 'Dummy title'); 

var xhr = new XMLHttpRequest(); 
xhr.open('PUT', YOUR_URL, true); 

xhr.onload(function(res){ 
    // Write your callback here. 
}); 

// Send the Data. 
xhr.send(fd); 

希望さえすれば、あなたの要件を満たすことができます。

Answer 3

本当に役立つでしょう：

http://ionicmobile.blogspot.in/2015/10/jquery-file-upload.html

必要に応じて適切な変更を行います。何か助けてください...

Answer 4

最初にデバイスから画像を選択する必要があります。

vm.getImages = function() { 
      var options = { 
       quality: 70, 
       destinationType: Camera.DestinationType.DATA_URL, 
       sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
       allowEdit: true, 
       correctOrientation:true, 
       encodingType: Camera.EncodingType.JPEG, 
       targetWidth: 300, 
       popoverOptions: CameraPopoverOptions, 
       saveToPhotoAlbum: true 
      }; 

      navigator.camera.getPicture(onSuccess, onFail, options); 

      function onSuccess(imageURI) {     
       vm.image = "data:image/jpeg;base64," + imageURI; 
       vm.imageURI = imageURI; 
      } 

      function onFail(message) {     
       console.log('Failed because: ' + message); 
      } 
     }; 

必要に応じて入力のソースタイプを変更できます。

sourceType: Camera.PictureSourceType.CAMERA, 

成功した場合、ImageURIを直接使用するか、アップロードするために下記のようにbase64に変換します。この後

vm.image = "data:image/jpeg;base64," + imageURI; 

あなたはファイルをアップロードすると同時に、進捗状況を追跡するためにFileTransfer pluginを使用することができます。

cordovaFileTransfer.upload() 
       .then(function (result) {}, 
        function (err) {}, 
        function (progress) {});