Question

我已经按照无数的例子（来自这里和其他网站）解释了如何将文件从Angular上传到Web服务器。我对使用角度文件上传和使用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]？如果我发送多部分数据，那么[名称]和[文件]是否可以？我是否需要发送两个单独的帖子？

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

Answer 1

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

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

Answer 2

请通过演示了解完整的解决方案：）

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()" />

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

2 个答案: