<div id="readability-page-1" class="page"><div>multer-s3를 활용한 AWS S3 파일업로드.
사용 스택 : Express.js / Vue.js + <a href="https://bootstrap-vue.js.org/">Bootstrap-vue</a>
준비물
<ol>
<li>AWS계정과 IAM 키</li>
<li>AWS S3 버킷</li>
<li>express에서 multer, multer-s3 설치</li>
</ol>
<h2 id="s3-인스턴스-얻어오기"><a href="#s3-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%96%BB%EC%96%B4%EC%98%A4%EA%B8%B0" aria-label="s3 인스턴스 얻어오기 permalink"></a>S3 인스턴스 얻어오기</h2>
<div data-language="javascript"><pre><code>let AWS = require("aws-sdk");
AWS.config.loadFromPath(__dirname + '/../config/aws.json');
let s3 = new AWS.S3();</code></pre></div>
aws.json은 다음과 같은 형식이다.
<div data-language="json"><pre><code>{ "accessKeyId": "blahblah", "secretAccessKey": "blahblah", "region": "your_region" }</code></pre></div>
<h2 id="upload하는-multer-s3-객체-만들기"><a href="#upload%ED%95%98%EB%8A%94-multer-s3-%EA%B0%9D%EC%B2%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0" aria-label="upload하는 multer s3 객체 만들기 permalink"></a>Upload하는 multer-s3 객체 만들기</h2>
<div data-language="javascript"><pre><code>let multer = require("multer");
let multerS3 = require('multer-s3');
var path = require('path');
var uuid = require('uuid/v4');

module.exports = {
 upload : multer({
 storage: multerS3({
 s3: s3,
 bucket: "your_bucket",
 key: function (req, file, cb) {
 let extension = path.extname(file.originalname);
 cb(null, uuid() + Date.now().toString() + extension)
 },
 acl: 'public-read-write'
 })
 })
};</code></pre></div>
key는 버킷에 올라갈 파일의 이름이다.
<h2 id="만든-multer-s3-객체로-post-라우팅하기"><a href="#%EB%A7%8C%EB%93%A0-multer-s3-%EA%B0%9D%EC%B2%B4%EB%A1%9C-post-%EB%9D%BC%EC%9A%B0%ED%8C%85%ED%95%98%EA%B8%B0" aria-label="만든 multer s3 객체로 post 라우팅하기 permalink"></a>만든 multer-s3 객체로 POST 라우팅하기</h2>
<div data-language="javascript"><pre><code>//최대 5개까지 업로드할 수 있음
router.post('/upload', s3Api.upload.array('img', 5),function(req, res, next){
 let imgFile = req.files;
 res.json(imgFile);
});

//1개 업로드
router.post('/upload', s3Api.multerS3Upload.single('img'),function(req, res, next){
 let imgFile = req.file;
 res.json(imgFile);
});</code></pre></div>
multer-s3에서 자동으로 AWS S3에 업로드 해줍니다.
<h2 id="프론트엔드-만들기"><a href="#%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0" aria-label="프론트엔드 만들기 permalink"></a>프론트엔드 만들기</h2>
<div data-language="javascript"><pre><code>&lt;b-form-file v-model="file" ref="fileinput" id="file" 
 accept="image/*" placeholder="Choose a file..."&gt;&lt;/b-form-file&gt;</code></pre></div>
Bootstrap-vue의 Form file에 대한 공식 정보는 <a href="https://bootstrap-vue.js.org/docs/components/form-file">여기</a>서 확인할 수 있습니다.
<div data-language="javascript"><pre><code>let formdata = new FormdData();
formdata.push(file);

axios.post('/upload',formdata,{
 headers:{
 'Content-Type': 'multipart/form-data'
 }
})
.then((res)=&gt;{
 console.log(res);
});</code></pre></div>
획득한 Javascript File 객체를 FormData에 넣고, 아까 라우팅한 주소에 POST를 해줍니다.</div></div>

cereme.dev

Sang yun Pae

multer-s3를 활용한 AWS S3 파일업로드.
사용 스택 : Express.js / Vue.js + Bootstrap-vue
준비물
AWS계정과 IAM 키
AWS S3 버킷
express에서 multer, multer-s3 설치
S3 인스턴스 얻어오기
let AWS = require("aws-sdk");
AWS.config.loadFromPath(__dirname + '/../config/aws.json');
let s3 = new AWS.S3();
aws.json은 다음과 같은 형식이다.
{ "accessKeyId": "blahblah", "secretAccessKey": "blahblah", "region": "your_region" }
Upload하는 multer-s3 객체 만들기
let multer = require("multer");
let multerS3 = require('multer-s3');
var path = require('path');
var uuid = require('uuid/v4');
module.exports = {
 upload : multer({
 storage: multerS3({
 s3: s3,
 bucket: "your_bucket",
 key: function (req, file, cb) {
 let extension = path.extname(file.originalname);
 cb(null, uuid() + Date.now().toString() + extension)
 },
 acl: 'public-read-write'
 })
 })
};
key는 버킷에 올라갈 파일의 이름이다.
만든 multer-s3 객체로 POST 라우팅하기
//최대 5개까지 업로드할 수 있음
router.post('/upload', s3Api.upload.array('img', 5),function(req, res, next){
 let imgFile = req.files;
 res.json(imgFile);
});
//1개 업로드
router.post('/upload', s3Api.multerS3Upload.single('img'),function(req, res, next){
 let imgFile = req.file;
 res.json(imgFile);
});
multer-s3에서 자동으로 AWS S3에 업로드 해줍니다.
프론트엔드 만들기
<b-form-file v-model="file" ref="fileinput" id="file" 
 accept="image/*" placeholder="Choose a file..."></b-form-file>
Bootstrap-vue의 Form file에 대한 공식 정보는 여기서 확인할 수 있습니다.
let formdata = new FormdData();
formdata.push(file);
axios.post('/upload',formdata,{
 headers:{
 'Content-Type': 'multipart/form-data'
 }
})
.then((res)=>{
 console.log(res);
});
획득한 Javascript File 객체를 FormData에 넣고, 아까 라우팅한 주소에 POST를 해줍니다.

multer-s3를 활용한 AWS S3 파일업로드

댓글