我正在使用 ng-flow在我的 AngularJS 应用程序中上传文件。我能够成功保存数据以及通过 ng-flow 上传多个文件。但是,在查询数据并通过 JSON 获取数据时,我不确定如何将文件添加到每一行的 ng-flow 对象中。每个文件都在 JSON 字符串中进行 base 64 编码。
澄清一下,我得到了每口井,每口井都有名称、位置、许可证等和多张图片。除图像外,井的所有属性都已成功填充到 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/