AngularJS：将base64图像添加到数组

Question

我有一个图像上载，可以在控制器中验证该图像，然后如果用户随后上载新图像并将图像添加到阵列中以显示适当的图像和新图像，则可以单击该用户以添加图像。

目前，如果我上传新图像，它将更改数组中的图像。

有没有一种简单的方法可以更改我的代码以解决此问题？

夏日

因此，为了澄清一下，当我单击“ Add Image我希望将当前图像添加到阵列中，当我上传新图像并添加图像时，我希望将新图像添加到阵列中并保留原始图像。

目前，如果我添加新图像，它会超出数组的权限。

请看小提琴

的HTML

 <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="creative in creative">
        <img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
    </div>


</div>

的JavaScript

angular.module('myApp', [])

.controller('UpLoadImage', function ($scope, $http, $timeout) {
    $scope.preview = 'img/download.png';
    $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.foo = "base64 image here";
        $scope.creative = [];

        $scope.addImage = function () {
            $scope.creative.push($scope.creative.length);
        };
});

Answer 1

最后，我写的不一样

的HTML

<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>

的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.foo = "base64 image here";


    $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')
        }
    };
});