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&nbsp;ng-controller="MyCtrl"> &nbsp;&nbsp;<input&nbsp;type="file"&nbsp;ngf-select="onFileSelect($files)"&nbsp;multiple></div>JS：//inject&nbsp;angular&nbsp;file&nbsp;upload&nbsp;directive.angular.module('myApp',&nbsp;['ngFileUpload']);var&nbsp;MyCtrl&nbsp;=&nbsp;[&nbsp;'$scope',&nbsp;'Upload',&nbsp;function($scope,&nbsp;Upload)&nbsp;{ &nbsp;&nbsp;$scope.onFileSelect&nbsp;=&nbsp;function($files)&nbsp;{ &nbsp;&nbsp;Upload.upload({ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'my/upload/url', &nbsp;&nbsp;&nbsp;&nbsp;file:&nbsp;$files,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;}).progress(function(e)&nbsp;{ &nbsp;&nbsp;}).then(function(data,&nbsp;status,&nbsp;headers,&nbsp;config)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;file&nbsp;is&nbsp;uploaded&nbsp;successfully &nbsp;&nbsp;&nbsp;&nbsp;console.log(data); &nbsp;&nbsp;});&nbsp;}];