프론트엔드 웹/React

PresignedURL 통해서 S3로 이미지 업로드하기

세리둥절 2023. 3. 10. 12:17
반응형

aws-sdk를 써서 직접 S3 bucket에 이미지 파일을 업로드할 수도 있지만 다음과 같이 PresignedURL을 통해서 S3로 이미지를 업로드할 수 있다. 

import axios from 'axios'

const axiosUploadImage = axios.create({
	baseURL: 'https://xeeeeesefd.execute-api.ap-northeast-2.amazonaws.com/prod', //임의
})

export { axiosUploadImage }
import { Feedback } from 'types/qa'
import { axiosUploadImage } from 'utils/axios'

type PresignedUrl = {
	data: {
		bucket: string
		key: string
		url: string
	}
}
export const getPresignedUrl = async (
	setPresignedUrl: React.Dispatch<React.SetStateAction<string | null>>,
	setImageName: (imageName: Feedback['imageName']) => void,
) => {
	const data: PresignedUrl = await axiosUploadImage.post(`/upload-image`, {})
	setImageName(data.data.key)
	setPresignedUrl(data.data.url)
}
import axios from 'axios'

export const uploadImageToS3 = (presignedUrl: string | null, image: any) => {
	try {
		presignedUrl && axios.put(presignedUrl, image)
	} catch (e) {
		console.log('image upload error', e)
	}
}
반응형