[VUE.JS] Axios를 사용하는 Vue.js의 파일 업로드

<template>
  <form @submit.prevent="uploadFile">
    <input type="file" @change="setFile"/>
    <button type="submit">Upload</button>
  </form>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    setFile(event) {
      this.file = event.target.files[0];
    },
    async uploadFile() {
      const formData = new FormData();
      formData.append("file", this.file);

      try {
        const response = await axios.post("/api/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        });

        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

선택한 파일로 파일 데이터 속성을 설정하는 setFile 메서드에 바인딩됩니다. uploadFile 메서드는 Axios를 사용하여 FormData 개체의 파일 데이터를 사용하여 /api/upload  POST 요청을 수행합니다. 요청 헤더가 "Content-Type": "multipart/form-data"로 설정되어 요청에 이진 데이터가 포함되어 있음을 나타냅니다. 서버의 응답이 콘솔에 기록됩니다.