React 이미지 파일 업로드 기능 추가
1) 소개
React에서 이미지파일 첨부기능을 만들어 보았습니다. 이 기능을 통해 이미지를 업로드 및, 백엔드 서버로 전송된 파일을 처리하게 됩니다.
이 글에서는 구글 스토리지에 파일을 업로드하고 해당 이미지의 URL을 가져오는 방식을 사용하였습니다.
구현 순서는 다음과 같습니다.
- 파일 업로드를 위한 input 요소 추가
- 파일 선택 시 이벤트 처리
- 선택된 파일을 FormData에 담아 백엔드로 전송
- 백엔드에서 파일을 처리 후 URL 반환
2) 작업내용
1.파일 업로드를 위한 input 요소를 추가합니다. 이는 파일을 선택할 수 있게 해줍니다.
<input type='file' name='images' onChange={onSelectFile} accept='.png, .jpg,image/*'/>
화면예시)
2.파일 업로드 시 onChange 처리로 onSelectFile 함수를 호출하여 파일정보를 FormData에 담기
3.FormData를 백엔드로 전송
FormData 객체를 사용해 파일 데이터를 서버로 전송합니다. fetch API를 이용해 POST 요청을 보냅니다.
해당 Formdata는 브라우저 정책상 consol.log에 찍히지 않기 때문에 데이터가 나오지 않는다고 당황하실 필요는 없습니다.
위 함수는 서버로 FormData를 전송하고, 응답을 처리합니다. 성공 시 성공 메시지를, 실패 시 에러 메시지를 출력합니다.
백엔드 서버에서는 FormData에 담긴 파일을 받아 처리합니다. 예를 들어, 파일을 구글 스토리지에 업로드하고, URL을 반환합니다.
이 부분은 서버 환경에 따라 달라질 수 있습니다.
3) 결과확인
위처럼 해당 데이터를 백엔드 서버에 전송 후 데이터가 잘 왔는지 확인합니다.
데이터가 잘 왔으니 이제 해당 파일을 서버에서 처리가 필요합니다.
서버에 업로드 (저의 경우 구글 스토리지에 저장) 및 DB에 업로드 파일 관련 데이터를 저장합니다.
구글 버킷 스토리지에 파일 업로드 하는 기능은 다음번에 다루도록 하겠습니다.
읽어주셔서 감사합니다. 질문은 언제든지 댓글에 작성해 주세요 😊