Front-End/React.js2 이미지 업로드(용량 압축, 확장자 제한, base64 인코딩) 저번 포스트에서 이미지 업로드에 관련한 포스트를 올렸다. 이 후 백엔드 분들과 소통 중 request가 너무 불확실하다는 이야기를 들어서 이미지 업로드에 대해 좀 더 알아보던 중 이미지를 업로드할때 프론트쪽에서 생각보다 가공해줘야하는 점들이 많다는 것을 깨닫고 다시 작성한다. 이미지 보낼 때 용량 압축 ! (이미지 용량이 너무 커지면 속도 저하 및 서버 용량 제한도 고려해야함) 압축된 이미지(바이너리 파일) -> Base64 변환Encoding(전송해야할 데이터의 양동 약 33%나 늘어남 근데도 왜쓰냐? ASCII는 데이터를 전달하기에 안전하지 않음 이후 formData로 주고받기 위해 다시 디코딩하여 Blob객체에 담음. 즉 정리하면 이미지를 우선 받으면 용량을 압축한다. 그리고 그 이미지를 처리하기 .. 2022. 11. 3. [React] 이미지 파일 업로드 및 미리보기 벨로그의 설정 페이지를 보면, 위 이미지와 같이 썸네일 이미지, 이미지 업로드 버튼 / 이미지 제거 버튼이 있다. 이처럼 클라이언트 웹에서 이미지 업로드 버튼을 클릭해 이미지를 선택하고, Back-End와 RESTFUL API을 활용해 서버에 전달해보자. 또한 업로드 이전에 화면에 이미지는 미리 보기 위해 초기에는 디폴트 이미지로 설정하고 이미지 파일이 변경될 때마다 이미지를 미리 볼수 있도록 해보자! [주요 도구들] - useRef - FileReader inputRef 버튼 클릭 시 input 요소에 접근하기 위해서 선언하였다!( 그 이유는 input type="file"로 선언하였을 때 파일 선택 버튼이 자동으로 생성되는데 이 때 이 버튼을 지우고 따로 버튼을 선언하여 작동하게끔 하기 위해서이다) .. 2022. 10. 30. 이전 1 다음
