앵귤러에서 파이어베이스 파일 업로드

 

 

앞선 angularfire2 라이브러리가 설치되어 있어야 한다.

메인 컴포넌트에서 AngularFireStorageModule을 임포트한다.

import {AngularFireStorageModule} from 'angularfire2/storage'; //파일관련 임포트
...(생략)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...(생략)
    AngularFireStorageModule //파일업로드관련 객체 임포트
  ],
  providers: [AngularFirestore],
  bootstrap: [AppComponent]
})
export class AppModule { }

이후에 생성자를 통해서 AngularFireStorage를 받아서 사용한다.

 

import { Injectable, Host, Optional } from '@angular/core';
import {AngularFireStorage,AngularFireStorageReference, AngularFireUploadTask} from 'angularfire2/storage';

@Injectable({
  providedIn: 'root'
})
export class MyfireBaseFileUploadService {

  //저장소 관련 객체
  private storage : AngularFireStorage;  //저장소
  private ref: AngularFireStorageReference;  //저장소가 참고하는 행위들(가져오기,삭제)
  private task: AngularFireUploadTask;  //저장소에서 행위를 끝내고 난 뒤의 객체

  constructor(@Host() @Optional() strg : AngularFireStorage) {   //의존성 주입
    this.storage = strg;
  }

  //파일 업로드
  fileUpload(file, filePath){
    this.ref = this.storage.ref(filePath + file);  //filePath는 파이어베이스에서의 기본 경로이다.
    this.task = this.ref.put(file);
  }

  //파일 주소 가져오기
  async getFileAddress(filepath){  //async로 동기화 걸기
    const refer = this.storage.ref(filepath);  
    await refer.getDownloadURL().subscribe(url=>{
      return url;
    });
  }
 
  //파일 삭제
  deleteFile(path : string){
    const refer = this.storage.ref(path);
    refer.delete();
  }

}

앵귤러에서 파일업로드중 고려해야될 점은 아무런 경로를 쓰지 않으면 루트경로에 파일을 업로드한다.

예를들어 hello.txt라하면 루트경로에 hello.txt가 저장되고, /folder/hello.txt라하면 folder라는경로에 저장한다.

물론 folder라는 경로가 없으면 스스로 만들어주며, 같은이름과 같은경로로 파일이 업로드되면 알아서 교체된다.

​

그리고, 다운로드를 위해 파일주소를 가져온 경우 async를 걸지 않으면 파일주소를 받는 프로세스가 길어 이벤트루프에 들어갈 수 있다.

그러면 해당 행위에 대해서는 null값이 나올 수 있다. 그러므로 동기화를 걸어주어야 한다.

 

 

* 위 내용이 실행되지 않는다면 조금 더 정리가 잘 되어있는 아래 내용을 참고하는게 좋다.

https://lts0606.tistory.com/190

앵귤러 튜토리얼 (Angular tutorial) -26 with 파이어 베이스