이전 포스팅에서 React에 img를 백엔드로 보내는 코드를 작성해보았다. 이번에는 이미지를 전송하기 전 사용자가 자신이 올린 이미지를 미리 볼 수 있도록 코드를 작성해보겠다.
코드 // 이미지를 넣는 코드에 추가 reader.onload = () => { setRegistrationInfo((registrationInfo) => { const newFileListL: any = [ ...registrationInfo.fileList, reader.result, ]; return { ...registrationInfo, fileList: newFileListL, }; }); }; reader.readAsDataURL(uploadFile); reader을 console에 찍어보면 base64로 변환된 이미지가 나온다. 이 데이터를 img 태그에 적용하면 이미지가 보인다. // 사용
fileList[0]} alt="Thumnail" wi...
#
img
#
React
#
thumnail
#
typescript
#
미리보기
#
썸네일
#
타입스크립트
원문 링크 : React에서 img 미리보기 적용하기
