Заполнение файлов изображений с помощью ng-flow.js из json
-
20-12-2019 - |
Вопрос
я использую нг-поток для загрузки файлов в мое приложение AngularJS.Я могу успешно сохранять данные и загружать несколько файлов через ng-flow.Однако при запросе данных и получении их через JSON я не уверен, как добавить файлы в объект ng-flow для каждой строки.Каждый файл имеет кодировку Base 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:
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 для файлов изображений, даже после того, как установил их в виде больших двоичных объектов.
/* 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
это не массив больших двоичных объектов, это массив FlowFile
https://github.com/flowjs/flow.js#flowfile
Доступ к Blob можно получить с помощью file
свойство (flow.files[0].file
).
Другие советы
Для моего приложения Rails, в редактировании действий я хотел предварительно загрузить свои существующие изображения.Listing_Images - это объект JSON моих приклеенных изображений.Вызов AddFile вызывает все обратные вызовы и пытается загрузить мой файл, который уже существует на сервере.Пропустить обратный вызов и просто легайте некоторые заполнители:
$scope.initExistingImages = function(listing_images, flowObj) {
Flow.prototype.addExistingFile = function (file, event) {
var f = new Flow.FlowFile(this, file);
this.files.push(f);
};
angular.forEach(listing_images, function(value, key) {
var blob = new Blob(['pre_existing_image'], {type: value.image_content_type});
blob.name = value.image.image_file_name;
blob.image_url = value.image.image_url;
blob.image_id = value.image.id;
blob.alt_text = value.alt_text;
blob.listing_image_id = value.id;
flowObj.addExistingFile(blob);
});
};
.