使用laravel在angularjs中上传其他数据的文件答案

【问题标题】：File upload with other data in angularjs with laravel使用laravel在angularjs中上传其他数据的文件
【发布时间】：2016-08-30 18:42:40
【问题描述】：

我想用 angularjs 上传文件和其他数据。我正在使用 FormData 但我从服务器端收到空白数组。

这是我的表格

<form ng-submit="beatSubmit()" name="beatform" enctype="multipart/form-data">
  <input type="text" id="beat-name" ng-model="beatData.title" required="required" />
  <input type="file" id="image" file-model="image" />
  <input type="file" id="tagged_file" file-model="tagged_file" accept="audio/mp3" />
  <input type="file" id="untagged-beat" file-model="untagged_file" accept="audio/mp3" />
  <input type="text" class="form-control" id="price1" ng-model="beatData.price1">
</form>

这是我的 Controller 和 FileModel 指令

app.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]);
                });
            });
        }
    };
  }]);
 // This is controller part in another file
   $scope.beatSubmit = function(){

            var image = $scope.image;
            var tagged_file = $scope.tagged_file;
            var untagged_file = $scope.untagged_file;

            var response = BEAT.uploadBeat($scope.beatData,image,tagged_file,untagged_file);
            response.success(function(response){
                console.log(response);
            });
        }

这是我的服务

uploadBeat:function(data,image,tagged_file,untagged_file){
            var fd = new FormData();
            fd.append('image', image);
            fd.append('tagged_file', tagged_file);
            fd.append('untagged_file', untagged_file);

            angular.forEach(data, function(value, key) {
                fd.append(key,value);
            });
            console.log(fd); // fd is null , I don't know why?
            var req = {
                         method: 'POST',
                         transformRequest: angular.identity,
                         url: 'api/upload_music',
                         data: fd,
                         headers:{
                             'Content-Type': undefined,
                             }
                        }
            return $http(req);

        }

当我试图从服务器端获取这些数据时，它将返回 null。我花了更多时间来解决这个问题但我没有任何解决方案。如果有人知道请帮帮我。提前致谢。

【问题讨论】：

标签： angularjs file-upload angularjs-directive laravel-5 form-data

【解决方案1】：

将此标头详细信息添加到 $http

$http({
                    method: 'POST',
                    url: '',
                    headers: {
                              'X-Requested-With': 'XMLHttpRequest',
                              'Accept':'*/*',
                              'Content-type':'application/x-www-form-urlencoded;charset=utf-8'
                             },
                    params:data,
                    timeout:4000
                  });

Laravel 不允许在没有相同域策略的情况下提交 ajax 请求

【讨论】：

【解决方案2】：

我发现一个错误，我必须从表单中删除 enctype="multipart/form-data"。

【讨论】：