서버에서 받은 이미지 파일 file 객체로 변환하기

What to do?

• 서버에서 이미지를 불러와서 img 태그 안에 넣어서 보여주는 것과 별개로 서버에서 이미지의 blob 데이터를 가져와서 자바스크립트의 file 객체로 변환하고 싶은 경우가 있을 것이다.

 

• 아래와 같은 엔티티와 api가 있고 이미지가 하나 등록되어 있다고 가정하자.
• 엔티티에서 data는 이미지를 blob 형식으로 변환해서 저장한 값이다.

import {Column, Entity, ManyToOne, PrimaryGeneratedColumn} from "typeorm";
import {Question} from "./Question";

@Entity()
export class Image {
    @PrimaryGeneratedColumn()
    id: number;

    @Column({length: 100, nullable: true})
    mimetype: string;

    @Column({type: "longblob"})
    data: string;

    @Column({length: 100, nullable: true})
    original_name : string;

    @ManyToOne(type => Question, question => question.images,{ onDelete: 'CASCADE' })
    question: Question;

}

• 이 api는 클라이언트에게 이미지 엔티티의 모든 정보를 넘겨주는 api라 생각하자.

static getImg = async (req, res) => {
    const img = await getConnection().getRepository(Image).findOne();
    console.log(img.data)
    res.send(img)
}

 

 

• 서버에서 받은 img의 정보가 아래와 같을 때

• 아래처럼 서버에서 보낸 blob array을 다시 Uint8Array로 변환하고 blob으로 변환해서 File 객체의 첫번째 인자에 들어가는 blob에 넣어주면 서버에 있는 이미지와 동일한 정보를 가지고 있는 이미지 객체를 생성할 수 있다!

const getURL = async () => {
    const img = await axios.get('/api/image')
    const newBlob = new Blob([new Uint8Array(img.data.data.data)]);
    const newFile = new File([newBlob], img.data.original_name, {type: img.data.mimetype})
}