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

前端之家收集整理的这篇文章主要介绍了javascript – 使用json中的ng-flow.js填充图像文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 ng-flow在AngularJS应用程序中上传文件.我能够成功保存数据以及通过ng-flow上传多个文件.但是,在查询数据并通过JSON获取数据时,我不确定如何将文件添加到每行的ng-flow对象中.每个文件都以JSON字符串编码.

为了澄清,我每个井都很好,每个井都有一个名称,位置,许可证等,以及多个图像.除了图像之外,井中的所有属性都成功填充在DOM中.

HTML:

@H_404_6@... <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控制器内:

@H_404_6@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后也是如此.

@H_404_6@/* 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). @H_404_6@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.

原文链接:https://www.f2er.com/js/159610.html

猜你在找的JavaScript相关文章