使用 Angular 上传包含其他表单数据的帖子的文件答案

【问题标题】：Upload files with Angular with a post containing other form data使用 Angular 上传包含其他表单数据的帖子的文件
【发布时间】：2016-08-12 18:12:15
【问题描述】：

我关注了无数示例（来自此处和其他站点），这些示例解释了如何将文件从 Angular 上传到 Web 服务器。我对使用 angular-file-upload 并使用 Multer 处理服务器（节点）上的数据的解决方案感到满意。

我无法找到一种从表单上传文件的方法，其中包含所有其他控制器数据的帖子。

控制器：

$scope.files = [];
$scope.name = "";
$scope.post = //$http post to server from service

查看：

<input type="text" ng-model="name">
<input type="file">
<button ng-click="post()">Send post without page refresh</button>

有没有办法可以在同一个帖子中发送 [name] 和 [files]？如果我使用多部分数据发送 [name] 和 [files] 可以吗？我需要发送两个单独的帖子吗？

目前，我的工作示例使用“post”的表单操作和“multipart/form-data”的编码类型提交。但我不希望页面刷新，我想从范围发送 [name] 和 [files] ...我需要将文件从表单附加到范围还是获取范围以从中提取文件DOM？

【问题讨论】：

标签： angularjs multipartform-data multer angular-file-upload

【解决方案1】：

请查看演示以获得完整的解决方案:)

Plunkr

<form>

<input type="text" placeholder="Enter Name here" ng-model="newCountry.Name" />
<label>Choose 1 or more files:</label>
<input type="file" ng-files="AddnewCountryFlag($files)" multiple />

<h3>Try Uploading Image file. It will preview your image.</h3>
<div ng-repeat="item in imagesrc">
  <img src="{{item.Src}}" />
  <label>{{item.Size}}kB</label>
</div>

<input type="submit" value="Send Data" ng-click="AddCountry()" />

【讨论】：

【解决方案2】：

您可以在上传之前将 formData 推送到文件。

$scope.uploader.onBeforeUploadItem = function(fileItem) {
    fileItem.formData.push({name: $scope.name});
};

【讨论】：