[리액트] 이미지 파일 서버로 전송하기 / axios, input, multipart/form-data

 

[React]

 

input 으로 첨부한 이미지 파일을 서버로 전송하는 방법에 대해 알아보자

 

 

---

 

<STUDY>

 

 

1. 이미지 첨부하기 (input 태그 사용)

import React from 'react';

export default function App() {
  return(
    <input type='file'/>
  )
}

 

 

2. 첨부한 파일 state에 저장하기

import React, {useState} from 'react';

export default function App() {
  const [image, setImage] = useState();
  
  const addImageFile = event => {
    setImage(event.target.files[0]);
  };
  
  return(
    <input type='file' onChange={event => addImageFile(event)} />
  )
}

 

 

onChange 이벤트를 이용하여 정보를 업데이트한다.

 

   💡 image : 첨부한 이미지의 정보를 저장할 state

 

   💡 addImageFile : input 태그의 값이 변경되었을 때 변경된 정보를 state에 업데이트

 

 

3. FormData(폼데이터)에 append 한 후 axios로 서버로 보내기

import React, {useState} from 'react';
import axios from 'axios';

export default function App() {
  const [image, setImage] = useState();
  
  const addImageFile = event => {
    setImage(event.target.files[0]);
  };
  
  const postImageFile = () => {
    const FormData = new FormData(); // 폼데이터 생성
    
    FormData.append('file', image);
    FormData.append('key', 'value'); // string 타입을 보내고 싶은 경우 
    
    axios.post('url', FormData, {
      headers: {
        'Content-Type': 'multipart/form-data'  // 이렇게 들어가야함!
      }
    })
  };
  
  return(
    <input type='file' onChange={event => addImageFile(event)} />
    <button onClick={postImageFile}>전송</button>
  )
}

 

   💡 FormData.append : 폼데이터에 append 할 경우 ('key', 'value') 형식으로 입력

      ❕ string type (문자열)의 경우에도 마찬가지로 ('key', 'value') 형식으로 입력한다.

 

   💡 postImageFile : 이미지 데이터를 전송하는 함수

      ❕ axios.post : 데이터는 반드시 FormData만 입력, headers 부분이 반드시 'multipart/form-data'로 들어가야한다.

 

 

---

 

리액트 네이티브로 이미지 파일을 전송해 본 적이 있었는데

웹으로 리액트를 이용하여 파일을 전송하려고 하니까 비슷하지만 조금 다른 부분이 있어서 다시 정리해 보았다.

이미지파일 외에 한글이나 워드, 엑셀 등의 다른 문서 파일도 전송하는 방법은 동일하다.

 

---

 

내가 보려고 정리하는 리액트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview