AngularJS 使用 FormData 上传多个文件 API
AngularJS Upload Multiple Files with FormData API
我需要使用 Laravel 5.1 作为后端在 Angular 应用程序中将图像和视频文件上传到服务器。所有 Ajax 请求都需要首先转到 Laravel 控制器，我们在那里有代码，说明文件到达那里时如何处理。我们之前已经完成了正常的 HTML 表单来向控制器提交文件上传，但是在这种情况下我们需要避免表单的页面刷新，所以我在 Ajax 到 [=40= 中尝试这样做].
我需要用 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 只是一个类型为 "file:
的输入
<input type="file" id="img_path" name="img_path" class="promo-img-path" accept="image/*">
我们现在使用 Angular，所以我不能再通过 HTML 表单发送以上内容。这就是我需要弄清楚该怎么做。
我们是两个尽最大努力的开发者，所以我相信有更好的方法来做到这一点。然而，在我重构这整个事情之前，我希望我可以使用 Angular（或 jQuery 作为最后的手段）来发送控制器 Laravel 需要的任何文件数据，以便制作上面的代码工作。答案可能很简单 "send a PUT to the method in that controller above, but instead of a normal JSON payload, use file info in this format and you can gather that info with..."
我也非常感谢任何有关我将来可以更好地执行此操作的方法的提示。
如何使用 $http 服务 POST FormData
当使用FormData API to POST files and data, it is important to set the 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 to set the content type. When sending a FormData object, the XHR API sets the content type to multipart/form-data with the proper boundaries and base64 编码的内容类型 header。
有关详细信息，请参阅 MDN Web API Reference - XHR Send method
How did you get the file information into $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>
推荐：POST 直接二进制文件
使用 multi-part/form-data 发布二进制文件效率低下，因为 base64 encoding 会额外增加 33% 的开销。如果服务器 API 接受带有二进制数据的 POSTs，则直接 post 文件。
我需要使用 Laravel 5.1 作为后端在 Angular 应用程序中将图像和视频文件上传到服务器。所有 Ajax 请求都需要首先转到 Laravel 控制器，我们在那里有代码，说明文件到达那里时如何处理。我们之前已经完成了正常的 HTML 表单来向控制器提交文件上传，但是在这种情况下我们需要避免表单的页面刷新，所以我在 Ajax 到 [=40= 中尝试这样做].
我需要用 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 只是一个类型为 "file:
的输入<input type="file" id="img_path" name="img_path" class="promo-img-path" accept="image/*">
我们现在使用 Angular，所以我不能再通过 HTML 表单发送以上内容。这就是我需要弄清楚该怎么做。
我们是两个尽最大努力的开发者，所以我相信有更好的方法来做到这一点。然而，在我重构这整个事情之前，我希望我可以使用 Angular（或 jQuery 作为最后的手段）来发送控制器 Laravel 需要的任何文件数据，以便制作上面的代码工作。答案可能很简单 "send a PUT to the method in that controller above, but instead of a normal JSON payload, use file info in this format and you can gather that info with..."
我也非常感谢任何有关我将来可以更好地执行此操作的方法的提示。
如何使用 $http 服务 POST FormData
当使用FormData API to POST files and data, it is important to set the 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 to set the content type. When sending a FormData object, the XHR API sets the content type to multipart/form-data with the proper boundaries and base64 编码的内容类型 header。
有关详细信息，请参阅 MDN Web API Reference - XHR Send method
How did you get the file information into
$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>
推荐：POST 直接二进制文件
使用 multi-part/form-data 发布二进制文件效率低下，因为 base64 encoding 会额外增加 33% 的开销。如果服务器 API 接受带有二进制数据的 POSTs，则直接 post 文件。