프로필이미지 생성

POST /profileimg

http://localhost:5000/profileimg

HEADERS

로그인 된 상태에서 해야 돼서 헤더에 jwt 토큰 필요

**Authorization :** bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiYzQxZjA0MDgtYzJmZi00NWQwLWFlZTQtMzdiODllMzA3NjY2IiwiaWF0IjoxNjQ3ODc1OTYxfQ.Xb16gunjLeqnnW4VvXI3VhT4xqkcQW-QUxmW4BtCPgM

Body

• json이 아닌 form-data 형태이다.

• fom-data의 키 필드는 반드시 “myImg”로 해야 한다.

  (백엔드에서 “myImg” 이름을 가진 파일만 인식하고 처리한다.)

//form-data 형태

//먼저 새로운 formData 객체를 만든다.
const formData = new FormData();

//formData.append()의 첫 인자에는 보낼 데이터에 대한 "필드 이름", 두 번째 인자에는 "보낼 데이터"
//input DOM 요소(fileInput)에 .files[0]를 붙여 "입력한 파일"을 얻을 수 있다.
const fileInput = document.querySelector('input[type=file]');
formData.append("myImg", fileInput.files[0]);

HTML 코드 예시

• form 태그에 반드시 enctype='multipart/form-data' 들어가야 함!
• input 태그에 type="file" accept="image/*" 들어가야 함!

<h1>My Profile</h1>
<form id="form" method="POST" action="/profileimg" enctype='multipart/form-data'>
  <div>
    <label id="img-label" for="img">사진 업로드</label>
    <input type="file" name="myImg" accept="image/*" multiple="false" />
  </div>
  <div>
    <button id="btn" type="submit">submit</button>
  </div>
</form>
<div id="submitResult"></div>

<script>

//처음엔 로그인해서 sessionStorage.userToken에 로그인정보의 토큰 저장

//로그인한 유저의 프로필 이미지 서버에 업로드하는 코드
const form = document.getElementById('form');
form.addEventListener('submit', async (e) => { 
  e.preventDefault();
  const fileInput = document.querySelector('input[type=file]');

  //새로운 formData 객체를 만든다.
  const formData = new FormData();
  //formData.append()의 첫 인자에는 보낼 데이터에 대한 "필드 이름", 두 번째 인자에는 "보낼 데이터"
  //input DOM 요소에 .files[0]를 붙여 "입력한 파일"을 얻을 수 있다.
  formData.append("myImg", fileInput.files[0]);

  container = document.getElementById('submitResult');
  try{
    const response = await fetch('/profileimg', { 
      method: 'POST',
      headers: {
        Authorization: `Bearer ${sessionStorage.getItem("userToken")}`,
      },
      body: formData
    });
    console.log(response);
    const jsonResult = await response.json();
    console.log(jsonResult);

    container.innerHTML = JSON.stringify(jsonResult);

  } catch(e) {
    container.innerHTML = e.message;
  }
});

Response