AngularJS 使用 FormData API 上传多个文件答案

【问题标题】：AngularJS Upload Multiple Files with FormData APIAngularJS 使用 FormData API 上传多个文件
【发布时间】：2017-06-04 16:14:10
【问题描述】：

我需要在使用 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';
    }

正如您在上面看到的，我们正在将我们获得的任何文件转换为具有文件名promotion.png 的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 有效负载，而是使用这种格式的文件信息，您可以使用...收集该信息”

如果我能在未来提供更好的方法，我也将不胜感激。

【问题讨论】：

我能给出的最好建议是不要重新发明轮子。有很多现有的 Angular 模块用于文件上传 - 使用一个通常会为你省去很多麻烦。
但是那些都是直接上传到某个地方的——它们并不是为了将文件数据发送到 Laravel 控制器。
您是否通过 PUT 发送文件以及常规输入？
它以普通的
形式发送到上述控制器。现在我需要通过 Angular 使用 Ajax PUT。我只需要知道如何在 PUT 中发送控制器需要的任何内容，以模拟从
$_FILE 是 PHP 存储所有提交文件的数组。如果您使用的是框架，您通常不会直接使用它，因为该框架通常会提供另一种方式。我将首先构建接收图像的路线，并确保您可以使用 Postman 之类的东西提交图像。完成后，您只需通过 AJAX 发出完全相同的请求。

标签： php angularjs laravel-5 angularjs-http angularjs-fileupload

【解决方案1】：

如何使用 $http 服务发布 FormData

使用FormData API POST 文件和数据时，将Content-Type header 设置为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 object 时，XHR API 将内容类型设置为multipart/form-data，并带有适当的边界和base64 编码。

欲了解更多信息，请参阅MDN Web API Reference - XHR Send method

您是如何将文件信息输入$scope.files的？

如何使`<input type="file">` 与`ng-model` 一起工作

此指令还使<input type="file"> 能够自动与ng-change 和ng-form 指令一起使用。

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);
      })
    }
  }
});

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" select-files-ng ng-model="fileArray" multiple>

    <code><table ng-show="fileArray.length">
    <tr><td>Name</td><td>Date</td><td>Size</td><td>Type</td><tr>
    <tr ng-repeat="file in fileArray">
      <td>{{file.name}}</td>
      <td>{{file.lastModified | date  : 'MMMdd,yyyy'}}</td>
      <td>{{file.size}}</td>
      <td>{{file.type}}</td>
    </tr>
    </table></code>
    
  </body>

如何使用 $http 服务发布 FormData

如何使&lt;input type="file"&gt; 与ng-model 一起工作

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

如何使`<input type="file">` 与`ng-model` 一起工作