[Nuxt.js & Node.js] S3에 다중 이미지 업로드를 해보자

이번 글은 Nuxt.js와 Node.js 를 이용하여 AWS S3에 다중 이미지를 업로드 해보겠습니다.

​

​

그럼 Frontend 부터 구현해보겠습니다.

​

​

​

 

디자인은 위와 같습니다.

 

// main.vue

<template>
  <div class = "section">
      <div class = "container">
          <Upload />
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import Upload from './Upload.vue'

export default {
  layout: 'user',
  components: {
    Upload
  },
  data () {
    return {
      dialog: false,
      file:'',
      form: {
        name: 'Image'
      }
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
</style>

 

일단 하나의 뷰를 만들었습니다.

이후, 컴포넌트로 쓸 Update.vue를 만들어봅시다.

 

 

<template>
<div class="example-drag">
    <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active"> 
      <h3>Drop files to upload</h3>
    </div>
    <template v-if="files.length">
      <v-data-table 
        dense 
        :headers="headers" 
        :items="files" 
        item-key="name" 
        class="elevation-1"
        hide-default-footer
      > 
      </v-data-table>
      <v-btn
        class="ma-2"
        style="padding:0px;"
        color="info"
        v-on:click="uploadStart(files)"
      > 
        upload
      </v-btn>
    </template>
    <template v-else> 
      <FileUpload
        class="btn btn-primary"
        :multiple="true"
        :drop="true"
        :drop-directory="true"
        v-model="files"
        ref="upload"
        @input="onDrop($event)" 
      > 
      </FileUpload> 
      <v-row>
        <v-col cols="12" sm="12" md="12">
          <div class="text-center p-5">
            <h4>Drop files anywhere to upload<br/>or</h4>
              <v-btn
                class="ma-2"
                style="padding:0px;"
                color="info"
              > 
                <label for="file" style="padding:0px 8px;">Select Files</label>
              </v-btn>
          </div>
        </v-col>
      </v-row>
    </template>
  </div>
</template>

<script>
import FileUpload from "vue-upload-component"
import axios from 'axios'
export default {
  components: {
    FileUpload
  },
  data: ()=> ({
    files: [], //파일 변수
    headers: [ //파일 업로드 후 테이블 영역 헤더부분
      { text: 'name', value: 'name' },
      { text: 'size', value: 'size' },
    ],
  }),
  methods: {
    onDrop(item){ //파일업로드 직후 동작
      //console.log(item)
    },
    async uploadStart() {
      
      //this.files = this.$refs.files;
      
      for (var i = 0; i < this.files.length; i++) {
        var fd = new FormData();
        fd.append('file',this.files[i].file);

      console.log(fd);

      try {
        await axios.post( [ 백엔드 API 주소 ] , fd);
        console.log(fd);
      } catch(err){}
      }
    },
  },
}
</script>

<style scoped>
example-drag .drop-active {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  z-index: 9999;
  opacity: .6;
  text-align: center;
  width:100%;
  background: #000;
}
.example-drag .drop-active h3 {
  margin: -.5em 0 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 40px;
  color: #fff;
  padding: 0;
}

</style>

 

 

Update.vue를 만든 후 axios에 백앤드 api 주소를 입력해주면 됩니다.

​

그럼 백앤드를 제작해봅시다.

 

 

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const AWS = require('aws-sdk');
const multerS3 = require('multer-s3');
const pool = require("../../config/database");
const { getimage } = require("./upload_controller");
var router = require('express').Router();

var address;
var uuid = require('uuid/v4');

AWS.config.update({
  accessKeyId: process.env.S3_ACCESS_KEY_ID,
  secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
  region:'ap-northeast-2',
});

const upload = multer({
  storage: multerS3({
    s3: new AWS.S3(),
    bucket: '[버킷 폴더]',

    key: function (req, file, cb) {
        let extension = path.extname(file.originalname);
        cb(null, uuid() + Date.now().toString() + extension);
    },
    acl: 'public-read-write'
  }),
  limits: { fileSize: 5 * 1024 * 1024 },
});

router.post('/', upload.array('file', 5), (req, res) => {
  
  let imgFile = req.files;
  res.json(imgFile);
});

module.exports = router;

 

이전 글에 multer을 이용하여 백앤드 s3 버킷 연동을 했었습니다.

​

아래 주소에서 확인하실 수 있습니다.

 

 

https://blog.naver.com/rile1036/221808142808

[Node.js] S3 버킷 연동 (multer)

 

 

백앤드까지 제작했으면 테스트 해봅시다!

 

​

​

​

이름이 변경되면서 들어간 것을 확인할 수 있습니다.