Javascript 通过AngularJS将多个文件上载到Laravel控制器 我有

浏览文件按钮

---

发布数据和选定的文件。

---

问题 我忘记了什么步骤

如何进一步进行调试？

---

---

这里给你一些建议：

将

内容类型

设置为

多部分/表单数据

，以将内容类型设置为类似。。。。“它有一部分在里面，请确保你得到它正确”的事情

使用Axios。这里有一个工作示例（如果您没有使用Axios，这个示例也很好）

---

我做过几个angular 1项目，也发现通过$http api上传文件并不简单。希望下面我在项目中使用的代码片段可以帮助您

$scope.store = function() {
  var formData = new FormData();

  // add normal properties, the name should be the same as
  // what you would use in a html form
  formData.append('model[name]', $scope.name);
  formData.append('model[type]', $scope.type);

  // add files to form data.
  for (var i = 0; i < $scope.files; i++) {
    formData.append('file' + i, $scope.files[i]);
  }

  // Don't forget the config object below
  $http.post('/image/store', formData, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
  }).then(function() {
    // ...
  });
};

$scope.store=function（）{
var formData=new formData（）；
//添加普通属性时，名称应与相同
//您将在html表单中使用什么
append（'model[name]'，$scope.name）；
formData.append（'model[type]'，$scope.type）；
//将文件添加到表单数据。
对于（变量i=0；i<$scope.files；i++）{
formData.append（'file'+i，$scope.files[i]）；
}
//不要忘记下面的配置对象
$http.post（'/image/store'，formData{
请求：angular.identity，
标题：{'Content-Type'：未定义}
}).然后（函数（）{
// ...
});
};

您可以改用FormData

var formData = new FormData();

  formData.append('model[var]', $scope.var);

  // For add to the FormData other file
  for (var i = 0; i < $scope.files; i++) {
    formData.append('file' + i, $scope.files[i]);
  }

 // POST REQUEST MUST BE:
  $http.post('url', formData, {
    transformRequest: angular.identity,  //It is for allowing files
    headers: {'Content-Type': undefined}
    }).then(function(response) 
  {
    // verify if response get 200
  });

var formData=new formData（）；
append（'model[var]'，$scope.var）；
//用于添加到FormData其他文件
对于（变量i=0；i<$scope.files；i++）{
formData.append（'file'+i，$scope.files[i]）；
}
//POST请求必须是：
$http.post（'url'，formData{
transformRequest:angular.identity，//用于允许文件
标题：{'Content-Type'：未定义}
}).然后（功能（响应）
{
//验证响应是否达到200
});

我在角度方面不是很有经验，所以我假设您的前端工作正常

调试提示创建一个名为…I dunno…file_dump.PHP的PHP文件。在该文件中，输入以下代码：

<?php
    echo "<pre>"
    print_r($_REQUEST)
    echo "</pre>"
?>

然后把你的表格交给我。这将显示所有请求数据。如果在输出中看不到文件，则JavaScript有问题。由于我不太擅长角度，我将向您指出以下链接：。 这些家伙似乎知道他们在做什么

如果您确实在file_dump.php输出中看到了您的文件，那么您的后端Laravel有问题。这方面，我可以帮助你，但我需要看到你的脚本，让我在这方面有所帮助

请发布文件_dump.php的结果

另外，您是否使用正确的方法获取文件。如果没有，那么我们已经找到了罪魁祸首

=D

---

Pranav是我的指令：

<input type="file" only-images="true" file-model="data.image" >

html:

 var fd = new FormData();
 fd.append('fileImage', data.image);

 $http.post('http://url.com', fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined,}
            })

在laravel上获取并复制图像：在文档上清晰可见

---

我更新了我的

标题：{'Content-Type'：undefined}，

-->

标题：{'Content-Type'：'multipart/form-data'}，

-仍然不起作用。我们也可以看看您的PHP脚本吗？目前，作为替代方案，您当然可以使用

array:1 [
  "model" => "{"type":"wedding"}"
]

$scope.store = function() {
  var formData = new FormData();

  // add normal properties, the name should be the same as
  // what you would use in a html form
  formData.append('model[name]', $scope.name);
  formData.append('model[type]', $scope.type);

  // add files to form data.
  for (var i = 0; i < $scope.files; i++) {
    formData.append('file' + i, $scope.files[i]);
  }

  // Don't forget the config object below
  $http.post('/image/store', formData, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
  }).then(function() {
    // ...
  });
};

var formData = new FormData();

  formData.append('model[var]', $scope.var);

  // For add to the FormData other file
  for (var i = 0; i < $scope.files; i++) {
    formData.append('file' + i, $scope.files[i]);
  }

 // POST REQUEST MUST BE:
  $http.post('url', formData, {
    transformRequest: angular.identity,  //It is for allowing files
    headers: {'Content-Type': undefined}
    }).then(function(response) 
  {
    // verify if response get 200
  });

<?php
    echo "<pre>"
    print_r($_REQUEST)
    echo "</pre>"
?>

app.directive('fileModel', ['$parse', 'message', function ($parse, message) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            //This part is for validate file type in current case must be image
            element.bind('change', function (e) {
                if (attrs.onlyImages == 'true') {
                    if (element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.jpg'
                        && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.jpeg'
                        && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.png'
                        && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.gif'
                        && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.bmp'
                    ) {
                        message.error("This field only accept files of type images(jpg,png)");
                        element.attr('is_valid', false);
                        return false;
                    } else {
                        element.attr('is_valid', true);
                    }
                }
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

<input type="file" only-images="true" file-model="data.image" >

 var fd = new FormData();
 fd.append('fileImage', data.image);

 $http.post('http://url.com', fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined,}
            })