[React] AWS S3 이미지 파일 업로드 하기

지난 번에 AWS S3 버킷 만들기까지 하였다. 이어서 React에서 어떻게 AWS S3 버킷에 업로드 하면 좋을지 정리한 것이다. 

 

728x90

 

---

 

1. aws-sdk 설치 후 임포트

먼저 aws-sdk 패키지를 설치해주어야 한다. yarn 또는 npm 사용에 맞춰서 다음의 명령어를 입력한다.

$ yarn add aws-sdk
$ npm install aws-sdk

 

2. aws.config.update 설정

버킷 지역과 발급 받아놓은 액세스 키를 등록해놓는 과정이다. 이 때, 액세스 키는 타인에 노출되면 위험하기 때문에 .env에 따로 빼두었다.

 

3. aws.S3.ManagedUpload 함수를 통해 파일 업로드

params에 버킷 이름과 저장될 파일 이름, 파일을 보낸다. 나는 저장될 파일 이름에 유저 ID에 확장자를 붙였는데, 버킷에 저장되는 파일 이름이 동일할 경우 파일이 올라가지 않기 때문에, uuid를 통한 고유 키로 저장하는 방식을 사용하기도 한다.

 

전체 코드

import React, { useState } from "react";
import * as Api from "../../api";
import AWS from "aws-sdk";

function Profile({ ownerData, setOwnerData }) {
    const region = "ap-northeast-2";
    const bucket = "elice-boardgame-project";

    AWS.config.update({
        region: region,
        accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY_ID,
        secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY,
    });

    const handleFileInput = async (e) => {
        const file = e.target.files[0];

        await Api.put(`user/${ownerData._id}`, {
            image: ownerData._id,
        });

        const upload = new AWS.S3.ManagedUpload({
            params: {
                Bucket: bucket, // 버킷 이름
                Key: ownerData._id + ".png", // 유저 아이디
                Body: file, // 파일 객체
            },
        });

        const promise = upload.promise();
        promise.then(
            function () {
                // 이미지 업로드 성공
                window.setTimeout(function () {
                    location.reload();
                }, 2000);
            },
            function (err) {
                // 이미지 업로드 실패
            }
        );
    };

    return (
        <>
            <Input
                type="file"
                onChange={handleFileInput} />
        </>
    );
}

export default Profile;

 

결과 화면

이미지 파일이 잘 올라간 것을 확인할 수 있다!

AWS S3 객체 업로드 성공