javascript - 使用 PUT 方法 Angularjs 发送文件

标签 javascript jquery angularjs laravel

我正在使用 AngularJS。我使用 angularjs 和 laravel 创建了一个文件上传功能。使用 FormData 上传文件工作正常。但是当我尝试通过 PUT 方法发送文件时,服务器端没有响应。

我已经浏览了以下答案。 Uploading a file with jquery and sending as a PUTHow to upload a file using an HTTP "PUT" using JQuery?但我无法找到解决方案。

这是我的代码。

<input type="file" ng-file-model = "formData.files" multiple>

我的代码的指令

app.directive('ngFileModel', ['$parse', function ($parse) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var model = $parse(attrs.ngFileModel);
        var isMultiple = attrs.multiple;
        var modelSetter = model.assign;
        element.bind('change', function () {
            var values = [];
            angular.forEach(element[0].files, function (item) {
                var value = item;
                values.push(value);
            });
            scope.$apply(function () {
                if (isMultiple) {
                    modelSetter(scope, values);
                } else {
                    modelSetter(scope, values[0]);
                }
            });
        });
      }
    };
}]);

这是我的函数,它将表单数据转换为 FormData

constructFormData : function( data ) {
  var fd = new FormData();
  for (var key in data) {
    var value = data[key];
    angular.forEach(data, function (file, i) {
      fd.append('files['+i+']', file);
    });
  }
  return fd;
}, 

这是我的 Controller

var formData = GeneralService.constructFormData($scope.formData);
FileService.update( formData )
  .success(function( data ){
      if(data.status == 403) {
        $location.path('/403');
      }
      if(data.success) {
          console.log(data);
      } else {
        ValidationService.showValidationErrors(data.errors);
      }
  });

这是我的服务

update : function(formData) {
  return $http({
        method: 'PUT',
        url: $rootScope.baseurl +'/files',
        data: formData,
        dataType: 'json',
        headers: {'Content-Type': undefined}
    });
},

服务器端(laravel)

routes.php

Route::put('/files', ['uses' => 'FilesController@update']);

文件 Controller

public function update(Request $request) {
  $data = $request->all();
  print_r($data);
}

上面的print_r函数不显示任何内容。

我使用print_r($request->all());获取发布的数据,它给出了空数据。我不知道我哪里出错了。如果我错误地问了这个问题,请道歉。

最佳答案

我有同样的问题,最后我找到了这段代码

var formData = new FormData();
angular.forEach($scope.data, function (value, key) {
    formData.set(key, value);
});

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

关于javascript - 使用 PUT 方法 Angularjs 发送文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37116627/

相关文章:

jquery - 为什么我的输入在 Bootstrap 中的格式不正确

javascript - AngularJS:使用 Shared Service(with $resource) 在 Controller 之间共享数据,但如何定义回调函数?

javascript - 使用 ExternalInterface.addCallback 注册的函数在 Javascript 中不可用

javascript - ag-grid api是否支持列过滤下拉

javascript - 动态删除样式?

javascript - 如何使用类选择器根据其同级选择的更改事件更新标签

javascript - AngularJs 按数据分组并使用过滤器显示

angularjs - $watchCollection 需要的参数返回错误,当作为数组传递时

javascript - Bootstrap 3 btn-group 在单击页面上的任何位置时丢失事件类

javascript - 如何使用 table2excel 将带标题的表格导出到 Excel