Angularjsで残りのAPIを使用して画像をアップロード

Question

アップロードに成功するために残りのAPIを使用して画像をアップロードする必要があります。ファイルの保存先の応答を取得します。例：D:/ddd/download、画像をアップロードできません。 。イメージをアップロードする際には、fileDataというパラメータ名を指定する必要があります。 APIの例：ポストのためのhttp://somelinkとパラメータがFILEDATA

HTMLコード

<input type = "file" file-model = "myFile"/> 
<button ng-click = "uploadFile()">upload me</button> 

私のサービスとディレクティブ

myApp.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]); 
       }); 
       }); 
      } 
     }; 
    }]); 

    myApp.service('fileUpload', ['$http', function ($http) { 
     this.uploadFileToUrl = function(file, uploadUrl){ 
      var fd = new FormData(); 
      fd.append('file', file); 

      $http.post(uploadUrl, fd, { 
       transformRequest: angular.identity, 
       headers: {'Content-Type': undefined} 
      }) 

      .success(function(){ 
      }) 

      .error(function(){ 
      }); 
     } 
    }]); 

私のコントローラファイル

です

Answer 1

この上でご確認ください... コントローラー：

$scope.uploadFile = function() { 
      var file = $scope.myFile; 
      console.log(file); 
      if(file.type==='image/jpeg' || file.type==='image/jpg' || file.type==='image/png' ){ 
      var uploadUrl = "http://"; 
      fileUpload.uploadFileToUrl(file, uploadUrl); 
      angular.element('input[type="file"]').val(null); 

      }else{ 
      $scope.errorMessage='File Type Error'; 
      } 
     }; 

サービス：

myApp.service('fileUpload', ['$http', function ($http) { 

    this.uploadFileToUrl = function (file, url) { 

     var uploadUrl = url; 
     var fd = new FormData(); 
     fd.append('file', file); 
     $http.post(uploadUrl, fd, { 
     transformRequest: angular.identity, 
     headers: {'Content-Type': undefined} 
     }) 
     .success(function() { 
      console.log("Image Save"); 
     }) 
     .error(function() { 
     }); 
    }; 

}]); 

Answer 2

あなたはFORMDATAオブジェクトにファイル自体を渡したい

fileUpload.uploadFileToUrl($scope.myFile, uploadUrl).success(function(response) { 
    $scope.fileName=response; 
}) 

とappendの最初のパラメータをfileDataとして設定する

fd.append('fileData', file); 

Answer 3

こんにちは、お友達が画像のアップロードを行っています。私はサービスを削除し、以下のコードを追加してコントローラに変更を加えました。

var file = $scope.myFile; 
    var uploadUrl = "http://"; 
    var fd = new FormData(); 
    fd.append('fileData', file); 
    $http.post(uploadUrl, fd, { 
     transformRequest: angular.identity, 
     headers: {'Content-Type': undefined} 
    }) 
    .success(function(response){ 
     $rootScope.fileValue = response; 

    })