angularjs – 使用Web API在Ionic应用程序中上传文件
发布时间:2020-12-17 07:38:49 所属栏目:安全 来源:网络整理
导读:我的问题如下. 我给了WEB API,我必须添加板卡. 我要做什么? 用户应该能够从电话中选择图像 用户可以添加板名 当用户点击提交时,输入的董事会名称和董事会成员应使用PUT方法发布Web API.以下是WEB API详细信息 WEB API详细信息 头 网址:https://example.com
我的问题如下.
我给了WEB API,我必须添加板卡. 我要做什么? >用户应该能够从电话中选择图像 WEB API详细信息 头 >网址:https://example.com 数据 > board_id:321 我已经使用cordovaImagePicker插件选择图像,然后我被卡住将其上传到服务器. 我可以使用cordova文件传输插件,但我认为这不会帮助我在这种情况下,因为没有指定的地方来存储图像.所有由WEB API完成的文件管理,我们只需用Data发布文件.
在尝试了很多解决方案后,我已经下面回答了.
Board.html <ion-view> <ion-nav-bar class="bar"> <ion-nav-title> <h1 class="title"> Create Board </h1> </ion-nav-title> </ion-nav-bar> <form name="boardForm" ng-submit="addBoard(data)"> <ion-content padding="false" scroll="true" has-bouncing="false"> <div id="form"> <div style="text-align: center; padding-top: 2%; padding-bottom: 2%;"> <div id="image-preview"> <label for="image-upload" id="image-label"><img src="{{ImagePrefix}}/task_plus.png" alt=""/></label> <input type="file" name="board_background" id="image-upload" file-model="data.board_background"> </div> <p>Add Cover</p> </div> <ion-list> <ion-item style="background-color: #F8F8F8;"> <label class="control-label" for="board_name">BOARD NAME</label> </ion-item> <ion-item ng-class="{true:'error'}[submitted && boardForm.board_title.$invalid]"> <input type="text" id="board_name" ng-model="data.board_title" placeholder="Add a Name" name="board_title" required> <p ng-show="submitted && boardForm.board_title.$error.required"> Please enter a board name </p> </ion-item> </ion-list> </div> </ion-content> <ion-footer-bar> <button class="button button-block control-button bottomOfPage" ng-click="submitted = true"> CREATE </button> </ion-footer-bar> </form> </ion-view> 指示 .directive('fileModel',['$parse',function ($parse) { return { restrict: 'A',link: function (scope,element,attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; element.bind('change',function () { scope.$apply(function () { modelSetter(scope,element[0].files[0]); }); }); } }; }]) 调节器 .controller('ManageBoardCtrl',function ($scope,$http,$ionicPopup,$state,BoardService) { $scope.submitted = false; $scope.data = {}; $scope.addBoard = function(formData) { BoardService.CreateBoard(formData).then(function(response) { if (response === "success") { $ionicPopup.alert({ title: "Success",template: "Board created successfully" }); } },function (response) { $ionicPopup.alert({ title: "Failed",template: "Somethings wrong,Can not create boards at now." }); }); } }) 服务 .service('BoardService',function ($q,$http) { var getUrl = API_URL + "boards"; var createBoard = function (fData) { var formData = new FormData(); formData.append("board_title",fData.board_title); formData.append("board_background",fData.board_background); return $q(function (resolve,reject) { $http({ transformRequest: angular.identity,method: 'POST',url: getUrl,headers: { 'Content-Type': undefined },data: formData }).success(function (response) { if (response.success === true) { resolve('success'); } else { reject('fail'); } }).error(function () { reject('requesterror'); }); }); }; return { CreateBoard: createBoard }; }) 部署Android / iPhone文件选择后,会根据操作系统处理浏览图像. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |