使用 Web 在 Ionic 应用程序中上传文件 API

Question

我的问题如下。

我已经给了WEB API，我必须在其中添加板图片。

我必须做什么？

用户应该能够 select 图片来自 Phone
用户可以添加板名
当用户点击提交时，输入的图板名称和图板图像应该 post 使用 Web API 和 PUT 方法。下面是WEBAPI详情

网页API详情

Header

URL: https://example.com
Content-Type: |内容类型 |
方法：PUT

数据

board_id: 321
board_title: |标题 |
board_background: |文件 |

我使用 cordovaImagePicker 插件来 select 图片，然后我无法将它上传到服务器。

我可以使用 cordova 文件传输插件，但我认为在这种情况下这对我没有帮助，因为没有指定的位置来存储图像。所有的文件管理都由WEB完成API，我们只需要post file with Data.

Answer 1

我可以建议一个简单的事情，

将输入["file"] 标签用于select 图像。您将获得文件对象和一个临时文件 url。使用此 url 您可以在表单中显示图像。

然后使用 formData 附加图像和其他字段。

例如

 var fd = new FormData();
 fd.append('board_background', $scope.image, $scope.image.name);
 fd.append('board_id', 321);
 fd.append('board_title', 'Dummy title');

 var xhr = new XMLHttpRequest();
 xhr.open('PUT', YOUR_URL, true);

 xhr.onload(function(res){
    // Write your callback here.
 });

 // Send the Data.
 xhr.send(fd);

希望对您有所帮助，满足您的要求。

Answer 2

在尝试了很多解决方案后，我得到了以下答案。

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 部署应用程序后，文件选择将根据 OS.

处理浏览图像

Answer 3

下面link一定对你有帮助：

http://ionicmobile.blogspot.in/2015/10/jquery-file-upload.html

根据需要进行适当的更改。任何帮助让我知道...

Answer 4

首先需要select来自设备的图像。

vm.getImages = function () {
            var options = {
                quality: 70,
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                allowEdit: true,
                correctOrientation:true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 300,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: true
            };

            navigator.camera.getPicture(onSuccess, onFail, options);

            function onSuccess(imageURI) {                
                vm.image = "data:image/jpeg;base64," + imageURI;
                vm.imageURI = imageURI;
            }

            function onFail(message) {                
                console.log('Failed because: ' + message);
            }
        };

如果需要，您可以更改输入源类型。

sourceType: Camera.PictureSourceType.CAMERA,

成功后，您将获得 ImageURI，要么直接使用它，要么将其转换为 base64，如下所述进行上传。

vm.image = "data:image/jpeg;base64," + imageURI;

之后您可以使用FileTransfer plugin上传文件并同时跟踪进度。

cordovaFileTransfer.upload()
                .then(function (result) {},
                  function (err) {},
                  function (progress) {});

使用 Web 在 Ionic 应用程序中上传文件 API

Uploading files in Ionic application using Web API

angularjs

asp.net-web-api2

ionic-framework

ionic