AngularJS 使用 FormData API 上传多个文件

Question

我需要使用 Laravel 5.1 作为后端在 Angular 应用程序中将图像和视频文件上传到服务器。所有的 Ajax 请求都需要首先到达 Laravel 控制器，我们在那里有关于文件到达时如何处理的代码。我们之前已经做了普通的 HTML 表单来提交文件上传到控制器，但是在这种情况下我们需要避免表单的页面刷新，所以我通过 Angular 在 Ajax 中尝试这样做。

我需要使用 Ajax 将哪些信息发送到 Laravel 控制器，而这些信息以前是通过 HTML 表单发送到控制器的？

这是 Laravel 控制器中的代码，一旦文件信息到达那里，它就会处理文件信息。这就是我需要弄清楚如何发送的，所以我希望可以重用这段代码：

    $promotion = Promotion::find($id);
    if (Input::hasFile('img_path')){
        $path             = public_path().'/images/promotion/'.$id.'/';
        $file_path        = $path.'promotion.png';
        $delete           = File::delete($file_path);
        $file             = Input::file('img_path');
        $uploadSuccess    = $file->move($path, 'promotion.png');
        $promotion->img_path = '/images/promotion/'.$id.'/promotion.png';
    }
    if (Input::hasFile('video_path')){
        $path             = public_path().'/video/promotion/'.$id.'/';
        $file_path        = $path.'promotion.mp4';
        $delete           = File::delete($file_path);
        $file             = Input::file('video_path');
        $uploadSuccess    = $file->move($path, 'promotion.mp4');
        $promotion->video_path = '/video/promotion/'.$id.'/promotion.mp4';
    }

正如您在上面看到的，我们正在将我们得到的任何文件转换为 PNG，文件名为 Promotion.png，因此很容易获取，而且我们只接受 .mp4 视频格式。因此，我们无需担心检查文件是否存在以及是否可以覆盖它。这就是为什么您可以在代码中看到我们在保存之前删除了该名称的任何现有文件。

HTML 只是一个输入类型为“文件：

<input type="file" id="img_path" name="img_path" class="promo-img-path" accept="image/*">

我们现在正在使用 Angular，所以我不能再通过 HTML 表单发送上述内容了。这就是我需要弄清楚该怎么做。

我们是两个正在竭尽全力的开发人员，所以我相信有更好的方法来做到这一点。然而，在我重构整个事情之前，我希望我可以使用 Angular（或 jQuery 作为最后的手段）将 Laravel 需要的任何文件数据发送给控制器，以使上述代码工作。答案可能很简单，就像“向上面那个控制器中的方法发送一个 PUT，但不是普通的 JSON 有效负载，而是使用这种格式的文件信息，您可以使用...收集该信息”

我也很感激任何关于我将来可以做到这一点的更好方法的提示。

Answer 1

如何使用 $http 服务 POST FormData

使用FormData API POST 文件和数据时，将Content-Type 标头设置为undefined.

var fd = new FormData()
for (var i in $scope.files) {
    fd.append("fileToUpload", $scope.files[i]);
}
var config = {headers: {'Content-Type': undefined}};

var httpPromise = $http.post(url, fd, config);

默认情况下，AngularJS 框架使用内容类型application/json。通过设置Content-Type: undefined，AngularJS 框架省略了允许XHR API设置内容类型的内容类型标头。发送FormData 对象时，XHR API 将内容类型设置为multipart/form-data具有适当的边界和base64编码。

有关更多信息，请参阅MDN Web API 参考 - XHR 发送方法

你是怎么把文件信息弄进去的$scope.files？

如何启用<input type="file">工作ng-model

该指令还可以<input type="file">自动使用ng-change和ng-form指令。

var fd = new FormData()
for (var i in $scope.files) {
    fd.append("fileToUpload", $scope.files[i]);
}
var config = {headers: {'Content-Type': undefined}};

var httpPromise = $http.post(url, fd, config);

angular.module("app",[]);

angular.module("app").directive("selectFilesNg", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

推荐：直接发布二进制文件

发布二进制文件multi-part/form-data效率低下，因为base64 编码会增加 33% 的额外开销。如果服务器 API 接受带有二进制数据的 POST，则直接发布文件。

请参阅如何使用 AngularJS 发布二进制文件（带演示）