我的问题如下.
我给了WEB API,我必须添加板卡.
我要做什么？
>用户应该能够从电话中选择图像
>用户可以添加板名
>当用户点击提交时,输入的董事会名称和董事会成员应使用PUT方法发布Web API.以下是WEB API详细信息
WEB API详细信息
头
>网址：https://example.com
>内容类型：|内容类型|
>方法：PUT
数据
> board_id：321
> board_title：|标题|
> board_background：|文件|
我已经使用cordovaImagePicker插件选择图像,然后我被卡住将其上传到服务器.
我可以使用cordova文件传输插件,但我认为这不会帮助我在这种情况下,因为没有指定的地方来存储图像.所有由WEB API完成的文件管理,我们只需用Data发布文件.
在尝试了很多解决方案后,我已经下面回答了.
原文链接：https://www.f2er.com/angularjs/142659.htmlBoard.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文件选择后,会根据操作系统处理浏览图像.
