Javascript 添加时未显示角度base64图像

我有一个程序，用户上传一个图像，看到预览，然后可以单击“添加”将图像添加到列表中

到目前为止，预览正在工作，但是添加函数没有将图像添加到下一个表行，没有显示任何内容

问题

有人知道为什么我的图像没有显示吗？如果最大插槽数大于添加的图像数，则应添加照片

如下图所示，图像应添加到表中的下一部分

HTML

 <div ng-repeat="campaign in campaigns" class="campaign-container">
    <div class="container">
        <h1>{{campaign.c_name}} {{$index}}</h1><strong>This Campaign you are allowed {{campaign.max_slots}} Images</strong>
        <table class="table">
            <thead>
            <tr>
                <th>Select File</th>
                <th>Preview Image</th>
                <th>Add to list</th>
                <th>Images</th>
                <!-- <th>Remove Image</th>-->
                <th>Save Campaign</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <!-- UPLOAD IMAGE-->
                    <div class="upload-new">
                        <input type="file"  fileread="vm.uploadme" id="fileinput-{{ $index }}" onchange="angular.element(this).scope().uploadImage(this)"/>
                    </div>
                    <!-- END-->
                </td>
                <td>
                    <!-- PREVIEW IMAGE-->
                    <div class="preview">
                        <img style="height: 100px; width: 100px" ng-src="{{campaign.preview}}" alt="preview image">
                    </div>
                    <!-- END-->
                </td>
                <td>
                    <button ng-click="addImage($index)">Add image</button>
                </td>
                <td>
                    <div ng-repeat="slot in campaign.slots" class="slot">
                        <img ng-click="addImage($index)" style="height: 100px; width: 100px" ng-src="{{slots.base_image}}" alt="show image here">
                        <img ng-src="{{slots.base_image}}" />
                        <button ng-click="removeImage(slots)">Remove Image</button>
                    </div>
                </td>
                <!-- <td>Remove button to be here</td>-->
                <td>
                    <button ng-click="SaveImage()">Save to API</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

{campaign.c_name}{{$index}}此活动允许您使用{campaign.max_slots}}图像
选择文件
预览图像
添加到列表中
图像
拯救运动
添加图像
删除图像
保存到API

JavaScript

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

        $scope.campaigns = [];
        $scope.preview = '';
        // $scope.slots = [];
        // $scope.maxSlots = maxSlots;

        $scope.uploadImage = function (element, index) {
            console.log(element);
            console.log(element.id);
            str = element.id;
            str = str.substr(str.indexOf('-') + 1);
            console.log(str);
            index = str;

            // console.log('we are here');
            input = element;
            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('we are here');
                            $scope.campaigns[index].preview = e.target.result;
                            // $scope.preview = e.target.result;
                            $scope.perfect = "you added a image";
                            $scope.$apply();

                        } else {
                            $scope.notPerfect = "incorrect definitions";
                        }
                    };
                    img.src = fr.result;
                };

                fr.readAsDataURL(file);
            } else {
                $scope.notPerfect = "to big";
            }
        };

        $scope.addImage = function (campaign) {
            if(!campaign) return;
            if ($scope.length < campaign.max_slots) {
                $scope.slots.push({
                    "slot_id": $scope.length + 1,
                    "base_image": $scope.preview,
                    "path_image": ""
                });
            } else {
                window.alert("you have to delete a slot to generate a new one");
            }
        };

.controller（'Dashboard'，函数（$scope、$http、$timeout）{
$scope.campetings=[]；
$scope.preview=''；
//$scope.slots=[]；
//$scope.maxSlots=maxSlots；
$scope.uploadImage=函数（元素，索引）{
控制台日志（元素）；
console.log（element.id）；
str=element.id；
str=str.substr（str.indexOf（'-'）+1）；
console.log（str）；
指数=str；
//log（“我们在这里”）；
输入=元素；
file=input.files[0]；
size=file.size；
如果（尺寸<650000）{
var fr=新文件读取器；
fr.onload=功能（e）{
var img=新图像；
img.onload=函数（）{
变量宽度=img.width；
var高度=img高度；
如果（宽度=1920，高度=1080）{
log（“我们在这里”）；
$scope.magnities[index].preview=e.target.result；
//$scope.preview=e.target.result；
$scope.perfect=“您添加了图像”；
$scope.$apply（）；
}否则{
$scope.notPerfect=“定义不正确”；
}
};
img.src=fr.result；
};
fr.readAsDataURL（文件）；
}否则{
$scope.notPerfect=“to big”；
}
};
$scope.addImage=功能（活动）{
如果（！活动）返回；
如果（$scope.length

您的视图和模型之间存在一些命名问题和一致性问题。请将

添加图像更改为类似以下内容：

$scope.addImage = function (campaign) {
    if(!campaign) return;
    if (campaign.slots.length < campaign.max_slots) {
        campaign.slots.push({
            "slot_id": $scope.length + 1,
            "base_image": campaign.preview,
            "path_image": ""
        });
    } else {
        window.alert("you have to delete a slot to generate a new one");
    }
};

$scope.addImage=功能（活动）{
如果（！活动）返回；
if（campaign.slots.length

你的装束是这样的：

<div ng-repeat="slot in campaign.slots" class="slot">
    <img style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="show image here">
    <img ng-src="{{slot.base_image}}" />
    <button ng-click="removeImage(slot)">Remove Image</button>
</div>


删除图像
您的视图和模型之间存在一些命名问题和一致性问题。请将
添加图像更改为类似以下内容：

$scope.addImage = function (campaign) {
    if(!campaign) return;
    if (campaign.slots.length < campaign.max_slots) {
        campaign.slots.push({
            "slot_id": $scope.length + 1,
            "base_image": campaign.preview,
            "path_image": ""
        });
    } else {
        window.alert("you have to delete a slot to generate a new one");
    }
};

$scope.addImage=功能（活动）{
如果（！活动）返回；
if（campaign.slots.length

你的装束是这样的：

<div ng-repeat="slot in campaign.slots" class="slot">
    <img style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="show image here">
    <img ng-src="{{slot.base_image}}" />
    <button ng-click="removeImage(slot)">Remove Image</button>
</div>


删除图像
在
添加图像中，是不是
$scope.slots.length
和
campaign.preview
而不是
$scope.preview
？嗯，谢谢，+1但是即使这是错误的，图像仍然不会显示。在
添加图像中，是不是
$scope.slots.length
和
campaign.preview
而不是
$scope.preview
？嗯，谢谢，+1但即使这是错误的，图像仍然不会显示。谢谢，但我有一个活动数组，然后在活动数组中我有存储图像的插槽数组。因此每个露营都有自己的插槽数组，其中包含不同的图像。谢谢，但我有一个活动数组然后在活动数组中，我有存储图像的插槽数组。所以每个露营都有自己的插槽数组和不同的图像。