2017-05-17 1 views
0

Ich habe alle Fragen auf dieser Website zu diesem Thema durchlaufen und ziemlich alle Codes ausprobiert. Nachfolgend finden Sie den neuesten Auszug, den ich aus den Antworten auf dieser Website entliehen habe. Ich versuche, eine Datei asynchron auf den AWS S3-Endpunkt hochzuladen. Ich erhalte meine signierte URL korrekt, kann aber die Datei nicht hochladen.

HTML:

<form name="Details" ng-controller="DetailsController"> 
<input type="file" file-input="files" /> 
<button ng-click="initUpload()">Upload</button> 
</form> 

FileInput- Richtlinie und DetailsController:

module.directive('fileInput', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link:function(scope, elm, attrs){ 
      elm.bind('change', function(){ 
      $parse(attrs.fileInput) 
       .assign(scope, elm[0].files); 
       scope.$apply(); 
      }); 
     } 
    } 
}]).controller("DetailsController", ["$scope", "PostalService", 
    function ($scope, PostalService) { 

     getSignedURLForUpload = function(userId, filename, filetype){ 
      return (PostalService.getSignedURLForUpload(userId, filename, filetype)); 

    }; 

    $scope.initUpload = function(){ 
     var signedUrl = getSignedURLForUpload($scope.userId, $scope.files[0].name,$scope.files[0].type); 
     signedUrl.then(function (data) { 
      var uploadPromise = PostalService.uploadFile($scope.files, data.signedRequest); 
      uploadPromise.then(function(result) { 
       $scope.awsurl = data.url; 
      }); 
     }); 

    }; 

]); 

Postal:

module.factory("PostalService", 
    ["$resource", 
    function($resource) { 

    var functions = { 
     getSignedURLForUpload: function(userId, filename, filetype) { 
     var SignUrl = $resource("host end point?userid="+userId+"&file-name="+filename+"&file-type="+filetype); 
     var promise = SignUrl.get().$promise; 
     return promise; 
     }, 

     uploadFile: function(file, signedRequest) { 
     var Upload = $resource(signedRequest, null, { 
      'save':{ 
      method: 'POST', 
       transformRequest: function(data){ 
       var fd = new FormData(); 
       angular.forEach(data, function(value, key) { 
        if(value instanceof FileList) { 
        if(value.length ===1){ 
         fd.append(key, value[0]); 
        }else { 
         angular.forEach(value, function(file, index){ 
         fd.append(key+'_'+index, file); 
         }); 
        } 
        }else { 
        fd.append(key, value); 
        } 
       }); 
       return fd; 
       }, 
       headers: {'Content-Type' : undefined} 
      } 
     }); 

     var promise = Upload.save(file).$promise; 
     return promise; 
     } 



    }; 
    return functions; 
    } 
]); 

Antwort

0

So das Problem war bei der Umsetzung von upload Funktion von Postal.

Die Header benötigt, um richtig eingestellt werden: 1. 'Content-Type': 'image/jpeg' 2. Berechtigung: 'undefined'

Authorization Header durch meine Anwendung und in dieser automatisch eingestellt werden wurden Fall, ich musste sie ungültig machen, da der bestimmte URL-Link, der zum Hochladen der Datei auf den Server verwendet wurde, vor-signiert war und die Signatur Teil der Abfrage war.

Der Inhaltstyp muss "image/jpeg" sein und nicht wie von meinem Backend-Server erwartet undefiniert sein.

Schließlich hat die Methode 'POST' nicht funktioniert. Musste es stattdessen durch "PUT" ersetzen.

Verwandte Themen