javascript - AngularJS:将base64图像添加到数组

Question

我有一个图像上传来验证我的 Controller 中的图像，然后我让用户点击添加图像，如果用户随后上传新图像并将图像添加到数组以显示吉祥图像和新形象。

目前，如果我上传一张新图片，它会更改数组中的图片。

有没有一种简单的方法可以修改我的代码来解决这个问题？

夏天

所以澄清一下，当我点击 Add Image 时，我希望将当前图像添加到数组中，当我上传新图像并添加图像时，我希望将新图像添加到数组中，并且保留原始图像。

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

请参阅Fiddle

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