반응에서 S3 버킷으로 파일 업로드

면책 조항 - 프런트 엔드에서 직접 s3로 파일을 업로드할 때 AWS 자격 증명이 네트워크 탭에 노출됩니다. FE에서 직접 보호된 S3 버킷에 파일을 업로드하지 마십시오. 항상 서버를 사용하여 파일을 업로드하십시오.

s3 버킷에 파일을 업로드하려면 aws-sdk npm 패키지를 설치해야 합니다.
npm install aws-sdk --save
버킷에 다음 정책이 있는지 확인

<?xml version="1.0" encoding="UTF-8"?>
 <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <ExposeHeader>ETag</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

ETag 헤더가 노출되어야 하며 그렇지 않으면 더 큰 업로드가 완료되지 않습니다.


React를 작성해 봅시다.import AWS from 'aws-sdk'
구성 요소 생성자에서 AWS 액세스 키와 보안 키를 설정합니다. aws 콘솔에서 바로 가져옵니다.

AWS.config.update({
  accessKeyId: AWSAccessKeyId,
  secretAccessKey: AWSSecretKey
})

생성자에서도 버킷 생성
항상 버킷의 이름과 지역을 다시 확인하십시오.

this.myBucket = new AWS.S3({
  params: { Bucket: 'video-bucket-xyz'},
  region: 'ap-south-1',
})

이제 버킷에 파일을 업로드하려는 경우 다음 함수를 호출하고 선택한 파일을 함수 인수로 전달합니다.

uploadFile = (file) => {
  const params = {
    ACL: 'public-read',
    Key: file.name,
    ContentType: file.type,
    Body: file,
  }
  this.myBucket.putObject(params)
    .on('httpUploadProgress', (evt) => {
      // that's how you can keep track of your upload progress
      this.setState({
        progress: Math.round((evt.loaded / evt.total) * 100),
      })
    })
    .send((err) => {
       if (err) {
         // handle the error here
       }
    })
}

putObjecthere 에 대해 자세히 알아볼 수 있습니다.


참고문헌
aws-sdk