解决方法

我给了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发布文件.

Board.html

<ion-view>
        <ion-nav-bar>
            <ion-nav-title>
                <h1>
                    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">
                    <divhttps://www.jb51.cc/tag/ott/" target="_blank">ottom: 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>
                            <labelfor="board_name">BOARD NAME</label>
                        </ion-item>
                        <ion-item ng->
                            <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>
                <buttonhttps://www.jb51.cc/tag/ott/" target="_blank">ottomOfPage"
                        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文件选择后,会根据操作系统处理浏览图像.

解决方法

解决方法