使用 ng-file-upload 上传角度文件答案

【问题标题】：angular file upload with ng-file-upload使用 ng-file-upload 上传角度文件
【发布时间】：2016-11-09 07:04:42
【问题描述】：

我正在使用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 无法加载 http://localhost:8000/api/v1/quotes/quoteitem/image/upload。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'http://localhost:3000'。

在邮递员中上传图片时我不需要任何标题请求，所以我删除了标题。

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 不是函数在 ng-file-upload.js:310 在 angular.js:10484 在 forEach (angular.js:322) 在 transformData (angular.js:10483) 在 $get.serverRequest (angular.js:11211) 在 processQueue (angular.js:15961) 在 angular.js:15977 在 Scope.$get.Scope.$eval (angular.js:17229) 在 Scope.$get.Scope.$digest (angular.js:17045) 在 Scope.$get.Scope.$apply (angular.js:17337)

我已经被困了很长时间了。我已经在服务器端进行了测试，它在邮递员中运行良好。任何帮助都会很棒。

【问题讨论】：

您的服务器需要允许 CORS 用于 POST 和 OPTIONS。错误信息很清楚。从浏览器的网络选项卡中查看来自服务器的响应内容，并确保返回的选项请求带有正确的标头。

标签： angularjs ng-file-upload

【解决方案1】：

问题是您正在从端口 3000 的站点上传到端口 8000 的端点。这些被认为是独立的来源，因此浏览器的安全功能正在发挥作用。您要么需要将它们放在同一个来源，要么将“Access-Control-Allow-Origin”标头添加到上传端点的服务器端响应中。

【讨论】：

我已经在服务器端完成了 cors 设置。所有其他路线都可以到达，但只有这条路线是不允许的。
如果可以，请尝试将它们设置为在同一端口上运行。如果它有效，那将证明您的 Angular 代码没有任何问题。

【解决方案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);
    };



}]);

【讨论】：

服务器没有收到文件。
stackoverflow.com/questions/42851149/…
如果你知道如何将图像存储到本地存储中

【解决方案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})
        };

【讨论】：