React 사용자 프로필 업로더 기능

프로필 사진 선택 및 미리보기 처리 함수

const handleImageChange = (e) => {
  const selectedImage = e.target.files[0];
  setProfileImage(selectedImage);

  const reader = new FileReader();
  reader.onload = () => {
    const imageUrl = reader.result;
    document.getElementById('preview-image').src = imageUrl;
  };
  reader.readAsDataURL(selectedImage);
};

사용자가 프로필 사진을 선택할 때 호출되는 함수입니다.
e.target.files[0]를 사용하여 선택한 이미지 파일을 가져옵니다.
setProfileImage 함수를 사용하여 선택한 파일을 profileImage 상태에 저장합니다.
FileReader API를 사용하여 선택한 이미지 파일을 읽고, onload 이벤트 핸들러를 설정하여 이미지를 미리보기로 표시합니다.

서버에 보낼때는

FormData 사용

클라이언트 측에서 FormData를 사용하여 이미지 파일을 서버로 전송합니다. 이 방법은 이미지 파일을 포함한 폼 데이터를 생성하고, 이를 AJAX 요청으로 서버에 전송합니다.

Fetch API 또는 Axios 사용

Fetch API나 Axios 등의 라이브러리를 사용하여 서버에 POST 요청을 보냅니다. 이때, 이미지 파일은 요청의 본문(body)에 포함됩니다.

근데 나는 formdata를 이번에 사용해볼것이다.

formdata 사용해서 이미지파일 서버전송하는 예시

const saveProfile = () => {
  // FormData 객체 생성
  const formData = new FormData();

  // 이름과 프로필 사진 파일을 FormData에 추가
  formData.append('name', name);
  formData.append('profileImage', profileImage);

  // POST 요청 보내기
  fetch('/upload-profile', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Profile uploaded successfully:', data);
  })
  .catch(error => {
    console.error('Error uploading profile:', error);
  });
};

fetch 함수를 사용하여 POST 요청을 보내면서 FormData를 본문(body)으로 전송합니다.

직접해보고 내용추가 예정ㅎ.ㅎ