이미지를 서버에 전달하는 방법(formData)

이미지 전달법

프론트에서 이미지들을 서버에 전달하기 위해서는 formData에 담아서 전달해야 한다.

이 사진에 담긴 정보를 formData에 담아주면 된다.

사용법

    const formData = new FormData();
    images.forEach((image) => {
      formData.append('images', image.file as File);
    });

    // 이미지
    await axios.post(`/item/upload/${idx}/picture`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
      },
    });

먼저 formData를 만들고 이미지가 여러 개인 경우에 반복문을 통해 formData에 append해준다. 이때 첫 번째 인자는 name("images")을 의미하고 서버쪽에서 설정한 이름과 통일해줘야 한다. 

그리고 formData를 보내기 때문에 axios header 안에 'Content-Type': 'multipart/form-data'을 넣어줘야 한다.