我想从 AngularJS 到 node.js 服务器做一个简单的多部分表单发布， 表单的一部分应包含 JSON 对象，另一部分应包含图像， （我目前只发布带有 $resource 的 JSON 对象）
我想我应该从 input type="file" 开始，但后来发现 AngularJS 不能绑定到那个..
我能找到的所有示例都是用于包装用于拖放的 jQuery 插件。我想要一个简单的文件上传。
我是 AngularJS 的新手，对编写自己的指令感到不自在。
【问题讨论】：
标签： angularjs angularjs-fileupload
一个真正可行的解决方案，除了 angularjs 之外没有其他依赖项（使用 v.1.0.6 测试）
html
<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>
Angularjs (1.0.6) 不支持“输入文件”标签上的 ng-model ，因此您必须以“本机方式”来传递所有（最终）选定的文件来自用户。
控制器
$scope.uploadFile = function(files) {
var fd = new FormData();
//Take the first selected file
fd.append("file", files[0]);
$http.post(uploadUrl, fd, {
withCredentials: true,
headers: {'Content-Type': undefined },
transformRequest: angular.identity
}).success( ...all right!... ).error( ..damn!... );
};
很酷的部分是 undefined 内容类型和 transformRequest: angular.identity 让 $http 能够选择正确的“内容类型”并管理处理多部分数据时所需的边界。
【讨论】：
fd.append("file", files[0]); fd.append("file",files[1]); fd.append("name", "MyName")
您可以使用简单/轻量级的ng-file-upload 指令。 它通过 FileAPI flash shim 支持非 HTML5 浏览器的拖放、文件进度和文件上传
<div ng-controller="MyCtrl">
<input type="file" ngf-select="onFileSelect($files)" multiple>
</div>
JS：
//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);
var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
$scope.onFileSelect = function($files) {
Upload.upload({
url: 'my/upload/url',
file: $files,
}).progress(function(e) {
}).then(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
}];
【讨论】：
Content-Type: multipart/form-data 的 base64 encoding 增加了 33% 的额外开销。如果服务器支持，直接发送文件效率更高：
$scope.upload = function(url, file) {
var config = { headers: { 'Content-Type': undefined },
transformResponse: angular.identity
};
return $http.post(url, file, config);
};
发送带有File object 的POST 时，设置'Content-Type': undefined 很重要。然后XHR send method 会检测到File object 并自动设置内容类型。
要发送多个文件，请参阅Doing Multiple $http.post Requests Directly from a FileList
我想我应该从 input type="file" 开始，但后来发现 AngularJS 不能绑定到那个..
<input type=file> 元素默认情况下不适用于ng-model directive。它需要一个custom directive:
ng-model一起使用的“select-ng-files”指令的工作演示1
angular.module("app",[]);
angular.module("app").directive("selectNgFiles", 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-ng-files ng-model="fileArray" multiple>
<h2>Files</h2>
<div ng-repeat="file in fileArray">
{{file.name}}
</div>
</body>$http.post 内容类型为 multipart/form-data
如果一定要发multipart/form-data:
<form role="form" enctype="multipart/form-data" name="myForm">
<input type="text" ng-model="fdata.UserName">
<input type="text" ng-model="fdata.FirstName">
<input type="file" select-ng-files ng-model="filesArray" multiple>
<button type="submit" ng-click="upload()">save</button>
</form>
$scope.upload = function() {
var fd = new FormData();
fd.append("data", angular.toJson($scope.fdata));
for (i=0; i<$scope.filesArray.length; i++) {
fd.append("file"+i, $scope.filesArray[i]);
};
var config = { headers: {'Content-Type': undefined},
transformRequest: angular.identity
}
return $http.post(url, fd, config);
};
使用FormData API 发送POST 时，设置'Content-Type': undefined 很重要。然后XHR send method 将检测FormData 对象并自动将内容类型标头设置为multipart/form-data 和proper boundary。
【讨论】：
filesInput 指令似乎不适用于 Angular 1.6.7，我可以看到 ng-repeat 中的文件，但相同的 $scope.variable 在控制器中是空白的？您的示例之一还使用file-model 和一个files-input
select-ng-files。使用 AngularJS 1.7.2 测试。
我刚遇到这个问题。所以有几种方法。首先是新的浏览器支持
var formData = new FormData();
Follow this link to a blog with info about 支持仅限于现代浏览器，否则它完全解决了这个问题。
否则，您可以使用 target 属性将表单发布到 iframe。 当您发布表单时，请确保将目标设置为 iframe，并将其显示属性设置为无。 目标是 iframe 的名称。 （只是让你知道。）
希望对你有帮助
【讨论】：
我知道这是一个迟到的条目，但我创建了一个简单的上传指令。您可以立即开始工作！
<input type="file" multiple ng-simple-upload web-api-url="/api/post"
callback-fn="myCallback" />
ng-simple-upload Github 上的更多内容，其中包含使用 Web API 的示例。
【讨论】：
您可以通过$resource 上传数据，方法是将数据分配给资源actions 的params 属性，如下所示：
$scope.uploadFile = function(files) {
var fdata = new FormData();
fdata.append("file", files[0]);
$resource('api/post/:id', { id: "@id" }, {
postWithFile: {
method: "POST",
data: fdata,
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
}
}).postWithFile(fdata).$promise.then(function(response){
//successful
},function(error){
//error
});
};
【讨论】：
我刚刚为 AngularJs 中的简单上传器编写了一个简单的指令（来自现有的当然）。
（确切的 jQuery 上传插件是https://github.com/blueimp/jQuery-File-Upload）
A Simple Uploader using AngularJs (with CORS Implementation)
（虽然服务器端是PHP的，你也可以简单地改变它的节点）
【讨论】：