Ty Viera Asked: 2020-02-03 07:34:32 +0800 CST 2020-02-03 07:34:32 +0800 CST 2020-02-03 07:34:32 +0800 CST 在 nginx 中使用 angularjs 上传文件 772 我想使用 Angular 上传一个文件,在post multipart服务器端我使用nginx作为连接到多个应用程序服务器的负载均衡器,我不知道这样做是否会将文件的不同部分发送到不同的应用程序服务器。 nginx 2 Answers Voted Best Answer Leandro Tuttini 2020-02-03T07:51:24+08:002020-02-03T07:51:24+08:00 我记得jquery用书店 jQuery 文件上传 Angular jQuery 文件上传插件 - AngularJS Fork 但它也有一个实现Angular,如您所见,您可以使用一个指令。 检查文档,因为它提到Nginx 文档概述 devconcept 2020-02-04T07:57:49+08:002020-02-04T07:57:49+08:00 推荐的选项是您使用插件 https://github.com/danialfarid/ng-file-upload https://github.com/leon/angular-upload 您还可以使用该模块$http使用FormData发出请求,但有一个小缺点,您将无法支持旧版浏览器,例如 IE 8 和 9。上面提到的插件支持上传到这些浏览器以及许多附加功能因为我向你推荐。 这是一个如何使用模块的示例$http angular.module('app', []) .controller('FileUploadController', ['$scope', '$http', function($scope, $http) { $scope.file = ''; $scope.sendFile = function() { $http.post('/api/myurl', $scope.file, { headers: { 'Content-Type': undefined } }); }; } ]) .directive('fileChanged', function() { return { restrict: 'A', scope: { model: '=', prop: '@' }, link: function(scope, element) { function changeEvt(evt) { var fd = new FormData(); fd.append(scope.prop || 'myFile', evt.target.files[0]); scope.$apply(function() { scope.model = fd; }); } element.on('change', changeEvt); scope.$on('$destroy', function() { element.off('change', changeEvt); }) } } }); .boton { border-radius: 6px; padding: 10px; border: solid 1px gray; color: white; background-color: #337AB7; } .boton:disabled { background-color: lightslategray; } <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="FileUploadController"> <form ng-submit="sendFile()"> <div> <label for="up">Seleccione un fichero</label> </div> <div> <input id="up" type="file" file-changed model="file"> </div> <br> <div> <button type="submit" class="boton" ng-disabled="!file">Enviar</button> </div> </form> </div> 这是发送文件的“纯角度”方式。 file如果您注意到,我不得不使用指令,因为 Angular 不支持con类型输入,ng-model因此指令是捕获输入中输入的文件并将其绑定到您的$scope. 我利用并没有绑定文件的内容,而是已经FormData准备好发送对象,因为它FormData允许File直接添加对象,但这只是如何执行此操作的示例之一;显然,插件可以为您提供更多选择。
我记得
jquery
用书店jQuery 文件上传 Angular
jQuery 文件上传插件 - AngularJS Fork
但它也有一个实现
Angular
,如您所见,您可以使用一个指令。检查文档,因为它提到
Nginx
文档概述
推荐的选项是您使用插件
https://github.com/danialfarid/ng-file-upload
https://github.com/leon/angular-upload
您还可以使用该模块
$http
使用FormData发出请求,但有一个小缺点,您将无法支持旧版浏览器,例如 IE 8 和 9。上面提到的插件支持上传到这些浏览器以及许多附加功能因为我向你推荐。这是一个如何使用模块的示例
$http
这是发送文件的“纯角度”方式。
file
如果您注意到,我不得不使用指令,因为 Angular 不支持con类型输入,ng-model
因此指令是捕获输入中输入的文件并将其绑定到您的$scope
. 我利用并没有绑定文件的内容,而是已经FormData
准备好发送对象,因为它FormData
允许File
直接添加对象,但这只是如何执行此操作的示例之一;显然,插件可以为您提供更多选择。