144

我想从 AngularJS 到 node.js 服务器做一个简单的多部分表单发布，表单应该在一个部分包含一个 JSON 对象，在另一部分包含一个图像，（我目前只发布带有 $resource 的 JSON 对象）

我想我应该从 input type="file" 开始，但后来发现 AngularJS 不能绑定到那个..

我能找到的所有示例都是用于包装用于拖放的 jQuery 插件。我想要一个简单的文件上传。

我是 AngularJS 的新手，对编写自己的指令一点也不自在。

4

7 回答 7

189

一个真正的工作解决方案，除了 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!... );

};

很酷的部分是未定义的内容类型和transformRequest: angular.identity，它们使 $http 能够选择正确的“内容类型”并在处理多部分数据时管理所需的边界。

于 2013-07-06T15:39:43.883 回答
43

您可以使用简单/轻量级的 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);
  }); 

}];
于 2013-08-24T16:53:49.640 回答
9

直接发送文件效率更高。

的base64 编码增加Content-Type: multipart/form-data了 33% 的额外开销。如果服务器支持，直接发送文件效率更高：

$scope.upload = function(url, file) {
    var config = { headers: { 'Content-Type': undefined },
                   transformResponse: angular.identity
                 };
    return $http.post(url, file, config);
};

当发送带有File 对象的 POST 时，设置'Content-Type': undefined. 然后XHR send 方法将检测File 对象并自动设置内容类型。

要发送多个文件，请参阅直接从 FileList执行多个请求$http.post

我想我应该从 input type="file" 开始，但后来发现 AngularJS 不能绑定到那个..

默认情况下，该<input type=file>元素不能与ng-model 指令一起使用。它需要一个自定义指令：

与1一起使用的“select-ng-files”指令的工作演示ng-model

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 发送方法将检测FormData对象并自动将内容类型标头设置为multipart/form-data并具有适当的边界。

于 2017-08-09T20:17:59.133 回答
5

我刚遇到这个问题。所以有几种方法。首先是新的浏览器支持

var formData = new FormData();

按照此链接访问博客，其中包含有关如何将支持仅限于现代浏览器的信息，但除此之外它完全解决了这个问题。

否则，您可以使用 target 属性将表单发布到 iframe。当您发布表单时，请确保将目标设置为 iframe，并将其显示属性设置为无。目标是 iframe 的名称。（只是让你知道。）

我希望这有帮助

于 2012-12-19T23:50:44.140 回答
3

我知道这是一个迟到的条目，但我创建了一个简单的上传指令。您可以立即开始工作！

<input type="file" multiple ng-simple-upload web-api-url="/api/post"
       callback-fn="myCallback" />

ng-simple-upload更多在 Github 上使用 Web API 的例子。

于 2016-02-16T11:30:20.163 回答
2

您可以通过$resource将数据分配给资源的 params 属性来上传，actions如下所示：

$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
    });
};
于 2016-03-30T09:17:13.983 回答
1

我刚刚为AngularJs中的一个简单上传器编写了一个简单的指令（来自现有的ofcourse）。

（确切的 jQuery 上传插件是https://github.com/blueimp/jQuery-File-Upload）

使用 AngularJs 的简单上传器（使用 CORS 实现）

（虽然服务器端是 PHP 的，你也可以简单地改变它的节点）

于 2013-05-26T09:34:40.857 回答