ng-file-upload로 각도 파일 업로드

Question

이미지 업로드를 위해 ng-file-upload을 사용하여 이미지 파일을 업로드합니다. 주어진 예제를 사용하여 액세스 제어 헤더 오류가 발생했습니다.

vm.uploadPic = function(file) { 
     file.upload = Upload.upload({ 
     url: 'http://localhost:8000/api/v1/quotes/quoteitem/image/upload', 
     data: {quote_item_id: vm.quote_item_id, filename: file} 
    }); 
    } 

이 오류 그렇게 우체부에 이미지를 업로드하는 동안 어떤 헤더 요청이 필요하지 않습니다

XMLHttpRequest cannot load http://localhost:8000/api/v1/quotes/quoteitem/image/upload . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access.

를 제공, 나는 헤더를 제거했습니다.

vm.uploadPic = function(file) { 
    file.upload = Upload.upload({ 
    url: domain+'/api/v1/quotes/quoteitem/image/upload', 
    data: {quote_item_id: vm.quote_item_id, filename: file}, 
    transformRequest: function(data, headersGetter) { 
     var headers = headersGetter(); 
     headers['Content-type']=undefined; 
     return headers; 
    } 

    }); 
} 

이

TypeError: data.hasOwnProperty is not a function at ng-file-upload.js:310 at angular.js:10484 at forEach (angular.js:322) at transformData (angular.js:10483) at $get.serverRequest (angular.js:11211) at processQueue (angular.js:15961) at angular.js:15977 at Scope.$get.Scope.$eval (angular.js:17229) at Scope.$get.Scope.$digest (angular.js:17045) at Scope.$get.Scope.$apply (angular.js:17337)

내가 지금 꽤 시간이에 붙어 있습니다. 나는 서버 측에서 테스트를했고 우편 배달부에서 잘 작동한다. 어떤 도움이라도 훌륭합니다.

Answer 1

문제점은 포트 3000의 사이트에서 포트 8000의 엔드 포인트로 업로드하는 것입니다. 이는 브라우저의 보안 기능이 실행되도록 별도의 출발점으로 간주됩니다. 동일한 원본에서 가져와야하거나, 업로드 엔드 포인트의 서버 측 응답에 'Access-Control-Allow-Origin'헤더를 추가하십시오.

Answer 2

이 하나

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(data){ 
      alert("success"); 
     }) 
     .error(function(data){ 
       alert("error"); 
     }); 
    }; 
}]); 

myApp.controller('fupController', ['$scope', 'fileUpload', '$http', function($scope, fileUpload, $http){ 

    $scope.uploadFile = function(){ 
     var file = $scope.myFile; 
     console.log('file is '+ file); 
     console.dir(file); 
     var uploadUrl = 'http://localhost:8000/api/v1/quotes/quoteitem/image/upload'; 
     fileUpload.uploadFileToUrl(file, uploadUrl); 
    }; 



}]); 

Answer 3

이

<form method="post" enctype="multipart/form-data" ng-controller="commentCtrl" name="form"> 
    <a href="" type="file" class="custom-height"><img src="source/assets/images/icons/icofileattached.png" class="attachmentpng-height" ngf-select="uploadFiles($file)" ng-model="files"/></a> 
    <md-button type="submit" class="md-raised custom-submit-button" ng-click="MakeComments()"> SUBMIT </md-button> 
    </form> 


$scope.uploadFiles = function(file) { 
      console.log(file); 
      $scope.fileData = file; 
      var fd = new FormData(); 
      fd.append('file', file); 
      Restangular.one('/api/files/end points').withHttpConfig({transformRequest: angular.identity}) 
       .customPOST(fd, '', undefined, {'Content-Type': undefined}) 
     };