使用 http POST ionic angular.js 将图像上传到 API 服务答案

【问题标题】：Image upload to API service using http POST ionic angular.js使用 http POST ionic angular.js 将图像上传到 API 服务
【发布时间】：2016-10-15 05:36:50
【问题描述】：

我是 ionic 开发的新手，我有一个应用程序，可以将图像上传到具有特定参数的服务中，并使用 post 方法上传它。我的问题是我可以在 ionic 上使用 http.post angular 上传图片吗？基于这个论坛

它建议使用cordova文件传输我如何使用它与我的某些参数

我做了什么

html

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="https://rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>

<body ng-app="starter" ng-controller="homeController">
    <ion-pane>

        <ion-nav-title>
            <span>Upload Foto</span>
        </ion-nav-title>
        <ion-content class="padding">
            <button class="button button-block button-dark" ng-click="selImages()">
      Select Images
    </button>
            <button ng-show="images.length > 0" class="button button-block button-stable" ng-click="shareAll()">
      Share All
    </button>
            <div class="list card" ng-repeat="img in images">
                <div class="item item-image">
                    <img ng-src="{{img}}">
                </div>
                <div class="item tabs tabs-secondary tabs-icon-left">

                    <a class="tab-item assertive image-option" href="#" ng-click="removeImage(img)">
                        <i class="icon ion-trash-a assertive"></i> Remove
                    </a>
                </div>
            </div>
        </ion-content>
    </ion-pane>
</body>

</html>

我的控制器

angular.module('starter', ['ionic','highcharts-ng','ngCordova'])

    .run(function ($ionicPlatform) {
        $ionicPlatform.ready(function () {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                StatusBar.styleDefault();
            }
        });
    })
.controller('ImagePickerCtrl', function ($scope, $rootScope, $cordovaCamera,$cordovaFileTransfer) {

        $scope.images = [];

        $scope.selImages = function () {
            $scope.upload = function() {
 
    }
            window.imagePicker.getPictures(
                function (results) {
                    for (var i = 0; i < results.length; i++) {
                        console.log('Image URI: ' + results[i]);
                        $scope.images.push(results[i]);
                    }
                    if (!$scope.$$phase) {
                        $scope.$apply();
                    }
                }, function (error) {
                    console.log('Error: ' + error);
                }
            );
        };

        $scope.removeImage = function (image) {
            $scope.images = _.without($scope.images, image);
        };

        $scope.shareImage = function (image) {
            window.plugins.socialsharing.share(null, null, image);
        };

        $scope.shareAll = function () {
            var url = "fendypradana.com/alfalahkeu/Apifalah/upload_buktibayar/format/json";
            window.plugins.socialsharing.share(null, null, $scope.images);
             var options = {
            fileKey: "avatar",
            fileName: "image.png",
            chunkedMode: false,
            mimeType: "image/png"
        };
        $cordovaFileTransfer.upload(url, targetPath, options).then(function (result) {
          console.log("SUCCESS: " + JSON.stringify(result.response));
      }, function (err) {
          console.log("ERROR: " + JSON.stringify(err));
      }, function (progress) {
           
      });

        };
    })

我必须包含 2 个参数 user_id=5 和 keterangan=seragam 任何建议都会有帮助。

【问题讨论】：

标签： javascript angularjs cordova ionic-framework

【解决方案1】：

在选项变量中

您可以在选项对象中传递参数。

所以

var options = {
        fileKey: "avatar",
        fileName: "image.png",
        chunkedMode: false,
        mimeType: "image/png",
        params: {
             user_id: 5,
             keterangan: 'seragam'
        }
    };

【讨论】：