사진 업로드 react - graphql - aws s3 [WEB]

1. 웹페이지 -> react - graphql - nestjs - postgres - AWS S3
2. button -> image File -> base64 Image file -> upload(grahpql) -> buffer ->
   AWS S3 upload -> S3 URL -> return URL -> image

1. 이미지 업로드 버튼을 클릭함

<input onChange={(e)=>imageHandler(e)} id="dropzone-file" type="file" className="hidden"  />

const [imageExist, setImageExist] = useState(false)
const [companyLogo, setCompanyLogo] = useState("")

  
  const imageHandler = async(e) => {
    const imageTarget = e.target.files[0];
    const reader = new FileReader();
    if(!imageTarget){return}
    reader.readAsDataURL(imageTarget);
    reader.onloadend = (finishedEvent) => {
        const { currentTarget:{result} } = finishedEvent;
        setCompanyLogo(result)
        setImageExist(true)
    }  
  }

결과: setCompanyLogo(result) 에 base64 파일 들어감

<img src={companyLogo} /> 

로도 바로 읽혀진다.

2. 업로드 되어 s3에서 base64를 buffer로 전환후 저장. 그리고 url을 return 한다.

useEffect(()=>{
    if(imageExist == false) return
    uploadImageMutation({
      variables: {
        input: {
          images: companyLogo
        }
      }
    }).then((res)=> {
      setCompanyLogo(res?.data.uploadImage.imageUrl[0])

    }) 
    .catch((error)=>console.log('error', error))
  }, [imageExist])

입력: imageExist == true 일 경우, input 값에 base64 정보값을 넣어서 업로드.
결과: companyLogo에 s3에 받아온 결과값을 넣음["https://warehousebackend.s3.amazonaws.com/1675912669164"]

---

중요!
axios 로 req 보낼 경우: cors 에러를 막기 위해 nestjs(백엔드)단에서 origin 설정해줘야 함.

app.module.ts
GraphQLModule.forRoot({
      cors: {
        origin: 'http://localhost:3000',
        credentials: true
      },
      

---

3. 백엔드에서 설정 부분 확인

cloudFlare.resolver.ts

   @Role(['Any'])
    @Mutation(output => CreateImageOutput)
    async uploadImage(
        @Args('input') createImageInput: CreateImageInput
    ):Promise<CreateImageOutput> {
        return this.cloudFlareService.uploadImage(createImageInput);
   }
   
   
   
cloudFlare.service.ts

 async uploadImage({images}: CreateImageInput):Promise<CreateImageOutput>{
        AWS.config.update({
            credentials: {
                accessKeyId: process.env.ACCESSKEYID,
                secretAccessKey: process.env.SECRETACCESSKEY
            }
        })

        try{
       
            let url = []
            for(let i=0; i<images.length;i++){
            const key = `${Date.now()}`
            const upload = await new AWS.S3().putObject({
                Body: Buffer.from(images[i].replace(/^data:image\/\w+;base64,/, ""), "base64"),
                Bucket: BUTCKET_NAME,
                Key: key,
                ACL: 'public-read'
                }).promise()

            const eachUrl = `https://${BUTCKET_NAME}.s3.amazonaws.com/${key}`
            url.push(eachUrl)     
            }
            return {
                ok: true,
                imageUrl: url
            }
             

        }catch(error){
            return {
                ok: false,
                error
            }
        }  
    }