Question

我不知所措，我不确定如何做到这一点。

我有一个程序，你上传图像（base64）然后添加到最多5的数组。

然后点击按钮Save然后发布

我想要什么

点击Save将每个图片添加到对象数组，并添加基本64代码作为base_image的值，每个图片都有自己的slot_id。

查看当前的工作计划，请参阅Fiddle

{
            "c_name": "Name of the campaign",
            "max_slots": 5,
            "slots": [
            {
                "slot_id": 1,
                "base_image": $scope.preview,
            },
            {
                "slot_id": 2,
                "base_image": $scope.preview,
            },
            {
                "slot_id": 3,
                "base_image": $scope.preview,
            },
            {
                "slot_id": 4,
                "base_image": $scope.preview,
            },
            {
                "slot_id": 5,
                "base_image": $scope.preview,
            }
        ]
        }

的JavaScript

angular.module('myApp', [])

    .controller('UpLoadImage', function ($scope, $http, $timeout) {

        $scope.preview = 'img/download.png';
        $scope.slots=[];
        $scope.maxSlots = 5; // this dynamic

        $scope.first =function(){
            console.log('we are here');
            input = document.getElementById('fileinput');
            file = input.files[0];
            size = file.size;
            if(size < 650000){
                var fr = new FileReader;
                fr.onload = function(e){
                    var img = new Image;

                    img.onload = function(){
                        var width = img.width;
                        var height = img.height;
                        if(width == 1920 && height == 1080){
                            console.log(e.target.result);
                            $scope.preview = e.target.result;
                            window.alert("perfect");
                            $scope.$apply();

                        }else{
                            window.alert("incorrect definitions");
                            console.log(width,height);
                            $scope.$apply();
                        }
                    };
                    img.src = fr.result;
                };

                fr.readAsDataURL(file);
            }else{
                window.alert("to big");
                console.log('file size to big')

            }
        };




        $scope.addImage = function () {
            if($scope.slots.length < $scope.maxSlots){
                $scope.slots.push({"image":$scope.preview});

            }else{
                window.alert("you have to delete a slot to generate a new one");
                console.log('you have to delete a slot to generate a new one')
            }
        };

        $scope.SaveImage = function () {

           //post object array here

        };
    });

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>Angular Base64 Upload Demo</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script type="text/javascript"
            src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script>
    <script type="text/javascript" src="app.js"></script>

</head>
<body>

<div ng-controller="UpLoadImage">

    <img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
    <label for="file">Select File</label>
    <input ng-model="file" type='file' ng-model-instant name='file' id='fileinput'
           accept='image/*' onchange='angular.element(this).scope().first(this)'/>

    {{uploadError}}

    <button ng-click="addImage()">Add image</button>
    <div ng-repeat="slot in slots">
        <img style="height: 100px; width: 100px" ng-src="{{slot.image}}" alt="preview image">
    </div>

    <button ng-click="SaveImage()">Save</button>


</div>


</body>
</html>

Answer 1

我通过对UIButton *leftCustomButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 35, 35)]; [leftCustomButton.widthAnchor constraintEqualToConstant:35].active = YES; [leftCustomButton.heightAnchor constraintEqualToConstant:35].active = YES; [leftCustomButton setImage:[UIImage imageNamed:@"defaultImage"] forState:UIControlStateNormal]; UIBarButtonItem * leftButtonItem =[[UIBarButtonItem alloc] initWithCustomView:leftCustomButton]; self.navigationItem.leftBarButtonItems = @[leftButtonItem];对象定义的一些修改来更改$scope.addImage函数。还更改了slots array以满足这些对象属性更改。请参阅下面的代码。

ng-repeat

angular.module('myApp', [])

  .controller('UpLoadImage', function($scope, $http, $timeout) {

    $scope.preview = 'img/download.png';
    $scope.slots = [];
    $scope.maxSlots = 5; // this dynamic

    $scope.first = function() {
      console.log('we are here');
      input = document.getElementById('fileinput');
      file = input.files[0];
      size = file.size;
      if (size < 650000) {
        var fr = new FileReader;
        fr.onload = function(e) {
          var img = new Image;

          img.onload = function() {
            var width = img.width;
            var height = img.height;
            if (width == 1920 && height == 1080) {
              console.log(e.target.result);
              $scope.preview = e.target.result;
              window.alert("perfect");
              $scope.$apply();

            } else {
              window.alert("incorrect definitions");
              console.log(width, height);
              $scope.$apply();
            }
          };
          img.src = fr.result;
        };

        fr.readAsDataURL(file);
      } else {
        window.alert("to big");
        console.log('file size to big')

      }
    };




    $scope.addImage = function() {
      if ($scope.slots.length < $scope.maxSlots) {
        $scope.slots.push({
          "slot_id": $scope.slots.length + 1,
          "base_image": $scope.preview,
        });

      } else {
        window.alert("you have to delete a slot to generate a new one");
        console.log('you have to delete a slot to generate a new one')
      }
    };

    $scope.SaveImage = function() {

      //post object here
      var object = {
        "c_name": "Name of the campaign",
        "max_slots": $scope.maxSlots,
        "slots": $scope.slots
      }

    };
  });

在保存创建对象并发布到端点

1 个答案: