Question

我有一个上传脚本，您上传图片并使用angular-base64-upload将其转换为base64。

我的控制器中有一个对象，我将数据发布到端点，我需要两件事。

base_image值为图像的base64代码。
每次上传时都要创建的新对象。

有人可以帮助我实现这个目标吗？谢谢。

摘要

每次添加新照片时，我都希望post对象数组添加新的插槽，例如slot_id: 1, slot_id: 2等等，以及插槽中的图像在对象base_image

var data = $.param({
    json: JSON.stringify({
        c_name: $scope,
        max_slots: $scope,
        slots: [{
            slot_id: 1,
            base_image: "base 64 image"
        }]
    })
});

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="PostData">
    <strong>Campaign Name :</strong>
    {{items.c_name}}
    <br>
    <strong>Max Slots :</strong>
    {{items.max_slots}}    
</div>    

<div class="container" ng-controller="AddImage">
    <form name="form">
        <h3>Add Creatives</h3>
        <div class="input-group">
            <label for="file">Select Files</label>
            <span class="help-block">
        <ul>
            <li>required</li>
            <li>Maxsize = 600</li>
            <li>Accept = image</li>
            <li>Maximum = 5</li>
        </ul>
    </span>

    <input type="file" ng-model="files" name="files" base-sixty-four-input multiple accept="image/*" maxsize="600" required maxnum ="5" on-change="onChange" onload="onLoad"
                   ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" required>

        </div>
        <div class="alert" ng-class="{'alert-danger': form.files.$invalid, 'alert-success': form.files.$valid}">
            form.files.$error:
            {{form.files.$error}}
        </div>
        <b>Model Value:</b>
        <table class="table table-bordered table-striped">
            <tr>
                <th>filename</th>
                <th>thumbnail</th>
                <th>filetype</th>
                <th>filesize (<i><small>KB</small></i>)</th>
                <th>base64</th>
            </tr>
            <tr ng-repeat="file in files">
                <td>{{file.filename}}</td>
                <td ng-repeat="step in stepsModel"><img class="thumb" ng-src="{{step}}"/></td>
                <td>{{file.filetype}}</td>
                <td>{{file.filesize / 1000}}</td>
                <td>{{file.base64.substring(0, 30)}}...</td>
            </tr>
            <tr>
                <td colspan="4" ng-show="files.length == 0">
                    <small><i>No file selected.</i></small>
                </td>
            </tr>
        </table>
    </form>
</div>

<form ng-submit="sendPost()">
    <button type="submit">Save</button>
</form>

</body>
</html>

JavaScript

angular.module('myApp', ['naif.base64'])
    .controller('PostData', function ($scope, $http) {
        $scope.items = {
            c_name: "Campaign name here",
            max_slots: 5,
            slots: [
                {
                    slot_id: 1,
                    base_image: "base 64 image"
                }
            ]
        };

        $scope.sendPost = function() {    
            var data = $.param({
                json: JSON.stringify({
                    c_name: $scope,
                    max_slots: $scope,
                    slots: [
                        {
                            slot_id: 1,
                            base_image: "base 64 image"
                        }
                    ]
                })
            });

            $http.post("/echo/json/", data).success(function(res, status)  {
                $scope.items = res;
                console.log("$scope.items: ", $scope.items);
            }, function() { console.log("There is an error"); })
        }
    })
    .controller('AddImage', function ($scope, $http, $window, $rootScope) {    
        $scope.imageUpload = function (element) {
            var reader = new FileReader();
            reader.onload = $scope.imageIsLoaded;
            reader.readAsDataURL(element.files[0]);
        };

        $scope.imageIsLoaded = function (e) {
            $scope.$apply(function () {
                $scope.stepsModel.push(e.target.result);
            });    
            $scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) {

            };    
            $scope.onChange = function (e, fileList) {

            };
        };

        var uploadedCount = 0;
        $scope.stepsModel = [];
    });

在上传Angular时将新数组添加到对象

0 个答案: