AngularJS：如何使用multipart表单实现简单的文件上传？

Question

我想从AngularJS到node.js服务器做一个简单的多部分表单帖子，表单应该在一个部分包含一个JSON对象，在另一个部分包含一个图像，（我目前只发布带有$ resource的JSON对象）我想我应该从input type =“file”开始，但后来发现AngularJS无法绑定到那个..我能找到的所有例子都是用于拖放jQuery插件的拖放。我想要一个简单的上传一个文件。我是AngularJS的新手，对编写我自己的指令感到不舒服。

Answer 1

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