JSON의 NG-Flow.js로 이미지 파일을 채우고 있습니다
-
20-12-2019 - |
문제
ng-flow 를 사용하여 Angularjs 앱에서 파일을 업로드합니다.NG-Flow를 통해 여러 파일을 업로드하는 데 따라 데이터를 성공적으로 저장할 수 있습니다.그러나 데이터를 쿼리하고 JSON을 통해 가져 오는 경우 각 행에 대해 NG-Flow 개체에 파일을 추가하는 방법을 모르겠습니다.각 파일은 JSON 문자열에서 암호화 된 기본 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 컨트롤러 내부 :
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;
});
.
BLOB로 설정 한 후에도 이미지 파일에 대한 출력 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 객체에 올바르게로드하려면 어떻게합니까?
해결책
새 파일을 흐르는 새 파일을 추가하려면 기존 메서드 GeneraCodicicetagcode를 사용하십시오.
var blob = new Blob(['a'], {type: "image/png"});
blob.name = 'file.png';
flow.addFile(blob);
.
flow.addFile(file)
를 지우려면 flow.files
를 사용하십시오.
참고 : flow.cancel()
는 BLOB의 배열이 아니며 flow.files
https://github.com/flowjs/flow의 배열입니다..js # flowfile
BLOB는 FlowFile
속성 (GENERACODODICCODE)으로 액세스 할 수 있습니다.
다른 팁
내 레일 앱의 경우 기존 이미지를 사전로드하고 싶었던 편집 조치에 있습니다.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);
});
};
.