[TIL] React S3에 이미지 저장하기

lezsuuu·2022년 8월 16일
0

TIL

목록 보기
23/42


성공...

S3에 이미지 업로드하기

import AWS from 'aws-sdk'; //패키지 설치

const OnFileUpload = (e) => {
    const ACCESS_KEY = "엑세스키값";
    const SECRET_ACCESS_KEY = "시크릿키값";
    const REGION = "지역";
    const S3_BUCKET = "버킷명";

// AWS ACCESS KEY를 세팅합니다.
    AWS.config.update({
      accessKeyId: ACCESS_KEY,
      secretAccessKey: SECRET_ACCESS_KEY
    });

// 버킷에 맞는 이름과 리전을 설정합니다.
    const myBucket = new AWS.S3({
      params: { Bucket: S3_BUCKET},
      region: REGION,
    });

    const file = e.target.files[0];

// 파일과 파일이름을 넘겨주면 됩니다.
    const params = {
      ACL: 'public-read',
      Body: file,
      Bucket: S3_BUCKET,
      Key: file.name
    };
    
    myBucket.putObject(params)
      .on('httpUploadProgress', (evt) => {
        alert("이미지를 업로드 중입니다...")
      })
      .send((err) => {
        if (err) console.log(err)
      })
}
export default OnFileUpload

trouble shooting

S3 최초 생성 이후에 기본세팅을 해주어야 업로드한 이미지에 접근할 수 있다.

나오는 대로 세팅을 다 했는데 403 에러가 떴다.

퍼블릭으로 설정해서 이미지 접근은 가능했지만,
추가적으로 사용자 권한을 부여하지 않아서 거부됐던 것 같다.
이미지가 업로드 성공 😊

profile
돌고 돌아 벨로그

0개의 댓글

Powered by GraphCDN, the GraphQL CDN