AngularJS：将base64图像添加到数组答案

【问题标题】：AngularJS: Add base64 image to arrayAngularJS：将base64图像添加到数组
【发布时间】：2017-09-22 12:52:29
【问题描述】：

我有一个图像上传来验证我的控制器中的图像，然后我让用户单击以添加图像，如果用户然后上传新图像并将图像添加到数组中以显示有利图像和新图像。

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

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

夏天

所以澄清一下，当我单击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);
        };
});

【问题讨论】：

您可以添加一个 JSFiddle 来演示您的问题吗？我不确定这个问题是什么问题。
没问题，我会更新问题并包含 Fiddel
已更新，希望对您有所帮助

标签： javascript angularjs arrays

【解决方案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')
        }
    };
});

【讨论】：