javascript - Axios 파일 업로드 기능 구현해보기

프로그래밍/자바스크립트
2022. 5. 23.

오늘은 Axios를 사용해 파일 업로드 기능을 구현하는 방법에 대해 알아보겠습니다. 이전에 Axios 파일 다운로드 기능에 대한 글을 쓴 적이 있는데, 이번에는 그 후속 편으로 Axios로 파일을 업로드하는 방법을 코드로 확인해보겠습니다.

Axios 파일 업로드 요청하기

axios({
  headers: {
    "Content-Type": "multipart/form-data",
  },
  url: "https://7942yongdae.tistory.com/file-upload", // 파일 업로드 요청 URL
  method: "POST",
  data: formData,
}).then(...);

Axios를 사용해서 파일을 업로드할 때 중요한 부분은 headers의 Content-Type, data입니다. 이 두 가지 설정이 되어있지 않으면 서버에서 파일을 받을 수 없기 때문입니다.

headers에 Content-Type으로 multipart/form-data가 설정되어 있지 않으면 서버에서는 전달받는 데이터의 타입을 알 수 없기 파일을 전달받을 수 없습니다. multipart/form-data는 RFC1867 사양으로 파일을 업로드하기 위한 규약입니다. data는 Axiso에서 서버에 파일 업로드를 요청할 때 사용되는 payload에 해당하는 값으로 업로드할 파일을 전달해주어야 합니다.

만약 CORS 문제가 발생한다면 header에 Access-Control-Allow-Origin을 설정해주세요.

headers: {
  "Content-Type": "multipart/form-data",
  "Access-Control-Allow-Origin": "*",
},

FormData를 사용한 파일 업로드 기능 구현

const formData = new FormData();
formData.append("files", event.target.files[0]);

axios({
  headers: {
    "Content-Type": "multipart/form-data",
    "Access-Control-Allow-Origin": "*",
  },
  url: "https://7942yongdae.tistory.com/file-upload", // 파일 업로드 요청 URL
  method: "POST",
  data: formData,
});

Axios를 사용해 서버에 파일 업로드를 요청하는 코드입니다. 파일을 업로드할 때 전달하는 파일 데이터는 FormData로 전달되어야 합니다. 다른 타입을 이용해서도 파일을 업로드할 수 있지만 그런 경우에는 정의한 타입에 맞는 핸들러를 클라이언트와 서버에 각 각 만들어서 추가하고 처리할 수 있도록 해야 합니다.

Axios 파일 업로드 기능 예제 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Axios 파일 업로드 기능</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <button id="btn-file-upload">파일 업로드</button>
    <input
      type="file"
      id="upload-file"
      style="display: none"
      accept="image/*"
    />
    <script>
      const inputFileUpload = document.querySelector("#upload-file");

      const fileupload = (event) => {
        const formData = new FormData();
        formData.append("files", event.target.files[0]);

        axios({
          headers: {
            "Content-Type": "multipart/form-data",
            "Access-Control-Allow-Origin": "*",
          },
          url: "https://7942yongdae.tistory.com/file-upload", // 파일 업로드 요청 URL
          method: "POST",
          data: formData,
        }).then((response) => {
          inputFileUpload.value = "";
        });
      };

      inputFileUpload.addEventListener("change", fileupload);

      document
        .querySelector("#btn-file-upload")
        .addEventListener("click", () => {
          inputFileUpload.click();
        });
    </script>
  </body>
</html>

Axios를 사용해 파일 업로드 기능을 구현한 예제 코드입니다. 서버에서 파일을 업로드하는 부분을 제외하고 화면을 기준으로는 실제로 동작하는 파일 업로드 샘플 코드입니다.

일반적으로 HTML에서 파일 업로드 기능은 <Input type="file">의 디자인이 유려하지 않기 때문에 화면에서 보이지 않게 만든 후 파일 업로드와 같은 버튼이 클릭되면 Input의 change 이벤트가 발동되도록 설계합니다. 이 예제 코드도 그런 경우에 사용할 수 있도록 만들어졌습니다.

tip. 만약 Input 파일의 change가 동작하지 않는다면

이 내용은 Axios의 파일 업로드와는 무관합니다. 간혹 파일 업로드 기능을 보면 있는 버그인데 파일을 업로드하고 다시 파일을 업로드할 때 동작하지 않는 문제가 발생한다면 파일 업로드 후 Input의 value를 초기화시켜주세요. Input의 value 초기화는 예제 코드를 참조하시면 됩니다. 대체적으로 Input의 change 이벤트 발생 조건이 충족되지 않아서 다시 파일 업로드 기능이 호출되지 않는 경우입니다.

그리고 Input이 가진 accept 속성을 활용하면 업로드할 때 선택되는 파일의 종류를 제한할 수 있어요.

글에서 사용한 파일 업로드 예제 코드는 첨부파일로도 제공하니 필요하신 분은 다운로드하셔서 사용하시면 됩니다.

axsio-file-upload.html

0.00MB

저작자표시 비영리 변경금지

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

Javascript - 숫자에 금액 단위 형식 사용하기 [원, 만, 억, 조, 경] (0)	2022.11.30
Javascript - 새로운 자바스크립트 ESNext (0)	2022.11.22
javascript - Axios 파일 다운로드 기능 구현해보기 (5)	2022.04.07
Javascript - 소수점 자릿수를 반올림, 올림, 내림을 하는 방법 (1)	2022.04.06
Javascript - Array groupBy() 함수 사용법 (1)	2022.03.22

개발자 일지