(풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 11.이미지 조회 및 삭제

다음은 이 글의 동영상 강의 입니다.

https://youtu.be/_bmxSSTzQsQ

지난 시간에 S3와 DB에 업로드한 파일을 조회하고 삭제하는 기능을 구현해 봅니다.

이미지 조회 기능 구현

slider-api 프로젝트에서 slider를 조회하는 api를 다음과 같이 추가합니다.

/src/slider/slider.controller.ts

@Get('')
async getSlider(): Promise<Slider[]> {
    return await this.sliderService.getSliders();
}

/src/slider/slider.service.ts

async getSliders(): Promise<Slider[]> {
    return await this.sliderRepository.find();
}

slider-front 프로젝트에 조회 기능을 추가합니다.

/pages/admin/index.vue

data()에 sliders 변수를 추가합니다.

data() {
    return {
        file1: null,
        bucketName: this.$env.S3_BUCKET,
        bucketRegion: this.$env.S3_REGION,
        identityPoolId: this.$env.S3_IDENTITY_POOL_ID,
        sliders: ''
    }
},

methods: 아래

async getSliders(){
    const options = {
        headers: {
            Authorization: `Bearer ${this.accessToken}`
        }
    }
    const path = '/slider';
    await this.$axios.get(
        path,
        options
    ).then(response => {
        this.sliders = response.data;
        console.log(this.sliders);
    }).catch(error => {
        console.log(error);
    })
},

이미지를 보여주기 위해서 bootstrap-vue의 card를 사용합니다.

https://bootstrap-vue.org/docs/components/card 

BootstrapVue

card component 소스를 복사하여 다음과 같이 수정합니다.

/pages/admin/index.vue

<div>
    <b-row>
        <b-col>
            <div v-for="slider in sliders" v-bind:key="slider.id">
                <div>
                    <b-card
                        :img-src="slider.imageUrl"
                        img-alt="slider"
                        img-top
                        tag="article"
                        style="max-width: 20rem;"
                        class="mb-2"
                    >
                        <b-card-text>
                        </b-card-text>
                        <b-button variant="primary" @click="deleteSlider(slider.id)">삭제</b-button>
                    </b-card>
                    </div>
            </div>
        </b-col>
    </b-row>
</div>

조회 테스트를 합니다.

이미지가 보이지 않습니다.

원인은 이미지 파일이 잘못 올라갔기 때문이므로, 업로드 소스를 "Body: this.file1" 으로 수정합니다.

await s3.upload({
    ACL: 'public-read',
    Body: this.file1,
    Key: this.genDateTime()+'_'+this.file1.name
}

이미지를 다시 업로드 하면 다음과 같이 표시됩니다.

 

이미지 삭제 기능 구현

slider-api에 삭제 api를 추가합니다.

/src/slider/slider.controller.ts

@Delete('/:id')
async deleteSlider(@Param('id') id, @Request() requestAnimationFrame, @Response() res): Promise<any> {
    return await this.sliderService.deleteSlider(id);
}

/src/slider/slider.service.ts

import * as AWS from 'aws-sdk';

async getSlider(id: number): Promise<Slider> {
    const slider = await this.sliderRepository.findOne({where: {id}});
    if(slider){
        return slider;
    }else{
        throw new NotFoundException(`Slider with ID ${id} not found!`);
    }
}

async deleteSlider(id): Promise<any> {
    const slider = await this.getSlider(id);
    if(slider){
        const bucketName = process.env.S3_BUCKET;
        const region = process.env.S3_REGION;
        const IdentityPoolId = process.env.S3_IDENTITY_POOL_ID;
        AWS.config.update({
            region,
            credentials: new AWS.CognitoIdentityCredentials({
                IdentityPoolId
            })
        });
        const s3 = new AWS.S3({
            apiVersion: '2006-03-01',
            params: {
                Bucket: bucketName
            }
        });
        //s3 파일 삭제
        const uriName = decodeURI(slider.imageUrl);
        const fileNamePos = uriName.indexOf('/images/');
        if(fileNamePos === -1){
            throw new NotFoundException();
        }
        const fileName = uriName.substring(fileNamePos + 8);
        s3.deleteObject({
            Bucket: bucketName,
            Key: 'images/'+fileName
        }), (err) => {
            if(err) {
                console.log(err);
                throw new InternalServerErrorException(err);
            }
        }
        //table에서 삭제
        return await this.sliderRepository.delete(id);
    }
}

터미널에서 다음 명령어로 aws-sdk 패키지를 추가합니다.

yarn add aws-sdk

환경 설정 파일 .env에 다음 내용을 추가합니다.
.env

S3_BUCKET=codegear-slider-bucket
S3_REGION=ap-northeast-2
S3-IDENTITY_POOL_ID=ap-northeast-2:*****************************

slider-front 프로젝트에 delete method를 추가합니다.
/pages/admin/index.vue

<b-button variant="primary" @click="deleteSlider(slider.id)">삭제</b-button>
.....
async deleteSlider(id){
    const headers = {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.accessToken}`
    }
    await this.$axios.delete(
        `/slider/${id}`,
        {headers}
    ).then(async response =>{
        await this.getSliders();
    }).catch(error=> {
        console.log(error);
    })
}

삭제 버튼을 클릭하면 이미지가 삭제되는 것을 확인할 수 있습니다.