이미지 업로드

이미지를 웹에 업로드하는 기본적인 로직은 아래와 같다.

1. 브라우저에서 사용자가 업로드할 이미지 파일을 선택합니다.
2. 브라우저에서 선택된 파일을 변수에 저장합니다.
   변수에 담긴 내용을 파일 객체라고 하며 파일 사이즈 등 파일에 대한 정보를 담고 있습니다.
3. 이제 브라우저에서는 파일 객체를 백엔드 서버에
   업로드 요청을 합니다.
   이를 위해 백엔드 서버에서는 파일 업로드를 하는
   API를 제작 및 구현 해놓아야 한다.
4. 백엔드 서버에서는 API를 통해 받은 파일을 DB에 저장 시 BLOB타입으로 저장

구현한 코드는 아래와 같다.

**Service
@Injectable()
export class FilesService {
  async upload({ files }: IFilesServiceUpload): Promise<string[]> {
    const waitedFiles = await Promise.all(files);

    // 1. 파일을 클라우드 스토리지에 저장하는 로직

    // 1-1) 스토리지 셋팅하기
    const bucket = 'yoyoyo';
    const storage = new Storage({
      projectId: 'polar-scene-370203',
      keyFilename: 'gcp-file-storage.json',
    }).bucket(bucket);

    // 1-2) 스토리지에 파일 올리기
    const results = await Promise.all(
      waitedFiles.map(
        (el) =>
          new Promise<string>((resolve, reject) => {
            const fname = `${getToday()}/${uuidv4}/origin/${el.filename}`;

            el.createReadStream()
              .pipe(storage.file(el.filename).createWriteStream())
              .on('finish', () => resolve(`${bucket}/${fname}`))
              .on('error', () => reject('실패'));
          }),
      ),
    );

    // 2. 다운로드URL 브라우저에 돌려주기
    return results;
  }
}

콘솔로 받아오는 값을 찍어서 지정된 규칙대로 GCP 상에 저장하였다.