填充图像文件与JSON NG-flow.js [英] Populating image files with ng-flow.js from json

问题描述

我使用 NG-流在我AngularJS应用程序上传文件。我能够成功地保存数据通过NG-流上传多个文件一起。然而，查询数据，并通过JSON得到它的时候，我不知道如何将文件添加到每一行的NG-流对象。每个文件是基地64连接在JSON字符串codeD。

I'm using ng-flow to upload files in my AngularJS app. I'm able to successfully save data along with uploading multiple files via ng-flow. However, when querying the data and getting it via JSON, I'm not sure how to add the files into the ng-flow object for each row. Each file is base 64 encoded in the JSON string.

要澄清，我也越来越每每口井都有一个名字，位置，许可证等，并多张图片。所有井的属性都成功地填充在DOM除图像。

To clarify, I am getting each well and each well has a name, location, permit, etc. and multiple images. All of the attributes of the well are successfully populated in the DOM except for the images.

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>

在AngularJS控制器：

Inside the 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;
    });

我已经成功地测试了输出JSON数据的base64为图像文件，甚至将它们设置为斑点之后。

I've successfully tested the output JSON base64 data for the image files, even after setting them as blobs.

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

如何正确的blob基于图像文件加载到NG-流对象的每一行？

How do I properly load blob based image files into ng-flow object for each row?

推荐答案

如果要添加新文件流，利用现有的方法 flow.addFile（文件）。

If you want to add new files to flow, use existing method flow.addFile(file).

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

如果你想清除 flow.files ，使用 flow.cancel（）。

请注意： flow.files 不是斑点的阵列，它是 FlowFile 的https://github.com/flowjs/flow.js#flowfile

Note: flow.files is not array of blobs, it is array of FlowFile https://github.com/flowjs/flow.js#flowfile

斑点可以用来访问文件属性（ flow.files [0] .file ）。

Blob can be accessed with file property (flow.files[0].file).

这篇关于填充图像文件与JSON NG-flow.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！