반응형
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)
}
}
반응형
'프론트엔드 웹 > React' 카테고리의 다른 글
React Image Component Export to PNG/JPEG/SVG (0) | 2023.05.03 |
---|---|
React에서 svg file 사용하는 방법 (0) | 2023.05.03 |
StickyTab (0) | 2023.01.04 |
React Emoji Not Showing (Window) (0) | 2022.12.19 |
Module not found: Error: You attempted to import /node_modules/react-refresh/runtime.js which falls outside of the project src/ directory (1) | 2022.08.31 |