AWS S3 bucket file Vue로 나타내기

기존에 html로 나타난 aws s3 bucket list => Vue(Vuetify)로 변경 하기

1.Vue Project 생성

VSCode terminal에서 vue create filename 으로 자신이 정한 filename의 vue 프로젝트를 생성해준다.

default값은 Vue2로 생성해주었다. filename은 소문자로 구성되어야한다. filename(o),  fileName(x)

이후 cd filename 으로 생성한 프로젝트로 이동 후 

npm run serve를 하면 vue 프로젝트 화면을 볼 수 있다.

이후 terminal에 vue add vuetify를 입력후 Vuetify 2 - Vue CLI (recommended) 를 선택해주

아래와 같은 화면이 나오는 모습을 확인할 수 있을 것이다.

2.하위 디렉토리로 가서 HelloWorld.vue 파일을 열어준다. filename -> src -> components -> HellowWorld.vue

terminal에서 npm install aws-sdk --save로 aws-sdk 파일을 받아 준 후

HelloWorld.vue 파일을 아래와 같이 수정해 준다.

<template>

  <v-container>

    <h1>fileList</h1>

        <div v-for="(folder ) in AWSFolderList" :key="folder.Key">

        <li @click="viewFolder(folder.Prefix)">{{ folder.Prefix }}</li></div>

        <div v-for="(file, index ) in AWSFileList" :key="file.Key">

        <v-checkbox @click="fileDir(file, index)" class="shrink mr-0 mt-0"><template v-slot:label><div>{{ file.Key }}</div></template></v-checkbox>

          </div>

        <v-btn @click="fileList">리스트</v-btn>

  </v-container>

</template>

<script>

import AWS from 'aws-sdk'

export default{

  data(){

    return{

      file: null,

      fileBucketName: 'BUCKETNAME',

      bucketRegion: 'REGION',

      IdentityPoolId: 'POOLID',

      AWSFolderList: [],

      AWSFileList: [],

    }

  },

  created(){

    this.fileList();

  },

  methods:{

    handlefileSelect(){

      this.file = this.$refs.file.files[0];

      console.log(this.file,'select');

    },

    fileList(){

      AWS.config.update({

      region: this.bucketRegion,

      credentials: new AWS.CognitoIdentityCredentials({

      IdentityPoolId: this.IdentityPoolId

        })

      });

      var s3 = new AWS.S3({

        apiVersion: "2006-03-01",

        params: { Bucket: this.fileBucketName }

      });

      s3.listObjects({ Delimiter: "/",  }, (err, data) => {

      if (err) {

        return alert("There was an error listing your files: " + err.message);

      } else {

        this.AWSFolderList = data.CommonPrefixes;

        this.AWSFileList = data.Contents;

        console.log(data);

      }

    });

      },

      viewFolder(e){

        AWS.config.update({

      region: this.bucketRegion,

      credentials: new AWS.CognitoIdentityCredentials({

      IdentityPoolId: this.IdentityPoolId

        })

      });

      var s3 = new AWS.S3({

        apiVersion: "2006-03-01",

        params: { Bucket: this.fileBucketName }

      });

        console.log(e);

        s3.listObjects({ Delimiter: "/", Prefix: e }, (err, data) => {

      if (err) {

        return alert("There was an error listing your files: " + err.message);

      } else {

        this.AWSFolderList = data.CommonPrefixes;

        this.AWSFileList = data.Contents;

        console.log(data);

      }

    });

      },

      fileDir(e){

        console.log(e);

      },

  }

}

</script>

<style>

</style>

aws s3의 bucket과 동일하게 리스트를 불러올 수 있다.

폴더를 클릭하면 하위 디렉토리로 이동 파일을 클릭시 console창에서 checkbox 의 해당 data 값을 확인할 수 있다.