반응형
Angular 2 이미지를 base64로 인코딩
업로드된 파일을 base64로 인코딩하여 요청에 전달하고 싶습니다.문제는 제가 Angular 2 with Typescript를 사용하고 있는데 어떻게 해야 하는지에 대한 정보를 찾을 수 없다는 것입니다.자바스크립트에서 캔버스로 할 수 있다는 것을 발견했는데 Typescript에서 코드를 어떻게 구현할 수 있는지 모르겠습니다.
<input type="file" class="form-control" accept="image/*" multiple
[(ngModel)]="spot.images" name="images">
그래서 저는 해결책을 찾았습니다.
구성 요소
changeListener($event) : void {
this.readThis($event.target);
}
readThis(inputValue: any): void {
var file:File = inputValue.files[0];
var myReader:FileReader = new FileReader();
myReader.onloadend = (e) => {
this.image = myReader.result;
}
myReader.readAsDataURL(file);
}
구성요소.구성요소
<input type="file" accept="image/*" (change)="changeListener($event)">
다음은 ng 모델과 연결되는 재사용 가능한 구성 요소로 포장된 위의 답변입니다.
import { NgModule, Component, Input, Output, ElementRef, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormsModule } from "@angular/forms";
@Component({
selector: 'file-upload',
template: `<input *ngIf="showFileNameInput" id="uploadFile" class="upload-file form-control" placeholder="Choose File" [(ngModel)]="selectedFileName" disabled="disabled" />
<div class="fileUpload btn btn-primary">
<span>{{uploadButtonText}}</span>
<input type="file" class="upload" accept="*" (change)="changeListener($event)">
</div>`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FileUploadComponent),
multi: true
}
]
})
export class FileUploadComponent implements ControlValueAccessor {
selectedFileName: string = null;
@Input() showFileNameInput: boolean;
@Input() uploadButtonText: string;
writeValue(value: any) {
//Handle write value
}
propagateChange = (_: any) => { };
registerOnChange(fn) {
this.propagateChange = fn;
}
registerOnTouched() { }
changeListener($event): void {
// debugger; // uncomment this for debugging purposes
this.readThis($event.target);
}
readThis(inputValue: any): void {
// debugger; // uncomment this for debugging purposes
var file: File = inputValue.files[0];
var myReader: FileReader = new FileReader();
myReader.onloadend = (e) => {
this.propagateChange(myReader.result);
this.selectedFileName = file.name;
}
myReader.readAsDataURL(file);
}
}
@NgModule({
declarations: [
FileUploadComponent
],
imports: [FormsModule],
exports: [
FileUploadComponent
]
})
export class FileUploadModule { }
다음과 같이 사용할 수 있습니다.
<file-upload [showFileNameInput]="true" allowedTypes="image/*" uploadButtonText="Upload File" [(ngModel)]="someProperty"></file-upload>
또한 그것이 내 사이트의 부트스트랩에 섞이는 데 도움을 준 몇몇의 CSS.
/********************************/
/* File Upload */
.fileUpload {
position: relative;
overflow: hidden;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.upload-file {
&.form-control {
width: auto;
display: inherit;
}
}
FileReader 클래스에 대한 Wrapper 클래스를 만들어 관찰 가능한 항목을 반환할 수 있습니다.구독하고 성공하면 .target을 사용하여 원하는 것을 무엇이든 할 수 있는 Base64를 얻습니다.
import {ReplaySubject} from "rxjs/ReplaySubject";
import {Observable} from "rxjs/Observable";
export class ObservableFileReader {
constructor(){}
public readFile(fileToRead: File): Observable<MSBaseReader>{
let base64Observable = new ReplaySubject<MSBaseReader>(1);
let fileReader = new FileReader();
fileReader.onload = event => {
base64Observable.next(fileReader.result);
};
fileReader.readAsDataURL(fileToRead);
return base64Observable;
}
}
Rxjs를 사용한 가능한 솔루션
import { fromEvent } from 'rxjs';
import { pluck } from 'rxjs/operators';
onUploadImage(event) {
if (event.target.files.length > 0) {
const fileReader = new FileReader();
let imageToUpload = event.target.files.item(0);
this.imageToBase64(fileReader, imageToUpload)
.subscribe(base64image => {
// do something with base64 image..
});
}
}
imageToBase64(fileReader: FileReader, fileToRead: File): Observable<string> {
fileReader.readAsDataURL(fileToRead);
return fromEvent(fileReader, 'load').pipe(pluck('currentTarget', 'result'));
}
언급URL : https://stackoverflow.com/questions/39272970/angular-2-encode-image-to-base64
반응형
'source' 카테고리의 다른 글
Oracle 시간(초)으로 변환:분:초 (0) | 2023.06.23 |
---|---|
Python 사전을 위해 열거() (0) | 2023.06.23 |
오류: RPC 실패. curl 92 HTTP/2 스트림 0이 제대로 닫히지 않았습니다. PROTCO_ERROR(err 1) (0) | 2023.06.23 |
클라이언트와 서버 간의 공유 유형 (0) | 2023.06.23 |
마스터 분기와 개발 분기 간의 "git pull" 또는 "git merge" (0) | 2023.06.23 |