Bilddateien mit ng-flow.js von json füllen

Question

Ich benutze ng-flow um Dateien in meine AngularJS-App hochzuladen.Ich kann Daten erfolgreich speichern und gleichzeitig mehrere Dateien über ng-flow hochladen.Beim Abfragen der Daten und beim Abrufen über JSON bin ich mir jedoch nicht sicher, wie ich die Dateien für jede Zeile zum ng-flow-Objekt hinzufügen soll.Jede Datei ist im JSON-String Base-64-codiert.

Zur Klarstellung: Ich erhalte jeden Brunnen und jeder Brunnen hat einen Namen, einen Standort, eine Genehmigung usw.und mehrere Bilder.Mit Ausnahme der Bilder werden alle Attribute des Bohrlochs erfolgreich im DOM ausgefüllt.

HTML:

...
<div flow-init flow-name="well.flow">
    <span class="btn" flow-btn flow-attrs="{accept:'image/*'}">Upload File</span>

    <table>
        <tr ng-repeat="file in well.flow.files">
            <td>{{ $index+1 }}</td>
            <td>{{ file.name }}</td>
            <td>{{ file.msg }}</td>
            <td><span ng-click="file.cancel()"><i class="icon-remove"></i></span></td>
        </tr>
    </table>
</div>

Im AngularJS-Controller:

wellsFactory.getData($scope.wellsParams).then(function(data){
        angular.forEach(data.wells, function(wells, wKey){

            if(wells.files){
                var list = [];
                angular.forEach(wells.files, function(files, fKey){

                    var binaryFile = atob(files.file);
                    var byteNumbers = new Array(binaryFile.length);
                    for (var i = 0; i < binaryFile.length; i++) {
                        byteNumbers[i] = binaryFile.charCodeAt(i);
                    }
                    var byteArray = new Uint8Array(byteNumbers);
                    var blob = new Blob([byteArray.buffer], {type: "image/png"});

                    list[fKey] = blob;
                });
            /* Add blob files to wells ng-flow  */
            data.wells[wKey].flow.files = list; /* breaks */
            //** How do I add ng-flow files? **//
            }
        });

        $scope.wells = data.wells;
    });

Ich habe die ausgegebenen JSON-Base64-Daten für die Bilddateien erfolgreich getestet, auch nachdem ich sie als Blobs festgelegt hatte.

/* Test Each File (within foreach) */
...
var reader = new FileReader();
reader.onload = function(e){
    console.log(e.target.result);
};
reader.readAsDataURL(blob);
...

Wie lade ich Blob-basierte Bilddateien für jede Zeile ordnungsgemäß in das ng-Flow-Objekt?

Answer 1

Wenn Sie dem Flow neue Dateien hinzufügen möchten, verwenden Sie die vorhandene Methode flow.addFile(file).

var blob = new Blob(['a'], {type: "image/png"});
blob.name = 'file.png';
flow.addFile(blob);

Wenn Sie löschen möchten flow.files, verwenden flow.cancel().

Notiz: flow.files ist kein Array von Blobs, sondern ein Array von FlowFile https://github.com/flowjs/flow.js#flowfile

Auf Blob kann mit zugegriffen werden file Eigentum (flow.files[0].file).

Answer 2

Für meine Rails-App, auf der Bearbeitungsaktion, auf der ich meine vorhandenen Bilder vorladet.Listing_Images ist das JSON-Objekt meiner pexistingenden Bilder.Addfile ruft alle Rückrufe auf, und versucht, meine Datei hochzuladen, die bereits auf dem Server vorhanden ist.Um den Rückruf und einfach nur Gerüst zu überspringen, werden einige Platzhalter:

generasacodicetagpre.