<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} />
로도 바로 읽혀진다.
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
},
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
}
}
}