javascript - 使用来自 json 的 ng-flow.js 填充图像文件

我正在使用 ng-flow 在我的 AngularJS 应用程序中上传文件。我能够成功保存数据并通过 ng-flow 上传多个文件。但是，在查询数据并通过 JSON 获取时，我不确定如何将文件添加到每一行的 ng-flow 对象中。每个文件都以64为基数编码在JSON字符串中。

澄清一下，我正在获取每口井，每口井都有名称、位置、许可证等和多个图像。除了图像之外，井的所有属性都成功填充到 DOM 中。

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 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数据，即使将它们设置为blob也是如此。

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

如何将基于 blob 的图像文件正确加载到每一行的 ng-flow 对象中？

最佳答案

如果要向流添加新文件，请使用现有方法 flow.addFile(file) 。

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

如果要清除 flow.files ，请使用 flow.cancel() 。

注意:flow.files 不是 blob 数组，而是 FlowFile https://github.com/flowjs/flow.js#flowfile 数组

可以使用 file 属性 ( flow.files[0].file ) 访问 Blob。

关于javascript - 使用来自 json 的 ng-flow.js 填充图像文件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24007735/