如何解决AngularJS使用FormData API上传多个文件
如何使用$ http服务发布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框架省略了内容类型标头，从而允许XHRAPI设置内容类型。发送FormData对象时，XHR API将内容类型设置为multipart/form-data具有适当的边界和base64编码。
您是如何获取文件信息的
$scope.files？
如何启用<input type="file">与之合作ng-model
该指令还可以<input type="file">自动使用ng-changeand 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>
推荐：直接发布二进制文件
使用base64编码添加二进制文件multi-part/form-data效率很低，因为base64编码会增加33％的额外开销。如果服务器API接受带有二进制数据的POST，请直接发布文件。
解决方法
我需要使用Laravel
5.1作为后端将图像和视频文件上传到Angular应用程序中的服务器。所有Ajax请求都需要首先发送到Laravel控制器，并且我们在这里有代码说明文件到达那里后如何处理。以前，我们已经完成了普通的HTML表单以将文件上传提交到控制器，但是在这种情况下，我们需要避免刷新表单的页面，因此我尝试通过Angular在Ajax中进行尝试。
我需要将以前通过HTML表单发送到控制器的Ajax信息发送到Laravel控制器吗？
这是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有效负载，并且可以使用…来收集该信息”。
我也希望将来有更多关于更好的方法的提示。