Vue.js でファイルアップロードをする

Vue.js というより axios でファイルアップロードをしたかった
保存ボタンがなく、アップロード時にサーバーに送るのを想定
サーバーサイドのFWは Laravel を想定

<template>
  <div>
    <!-- ファイルアップロード用の input -->
    <input
      type="file"
      ref="image"
      accept="image/*"
      name="image"
      @change="uploadImage"
    />
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "InputFile",
  methods: {
    uploadImage() {
      // parameter の用意
      const params = new FormData();
      params.append("image", this.$refs.image.files[0]);

      axios
        .post(`${process.env.MIX_APP_URL}ファイルアップロード先のURI`, params, {
          headers: {
            "Content-Type": "multipart/form-data",
            Authorization: "XXXXXXXXXXXX",
          },
        })
        .then((res) => {
          console.log(res, res.data);
          if (res.status !== 200) {
            console.error("画像のアップロードに失敗。");
            return;
          }
          // サーバー側のレスポンスに合わせてエラーハンドリングなど
          if (!res.data.succeeded) {
            console.error("画像のアップロードに失敗。");
            return;
          }
          // アップロード成功時の処理
          console.log("画像アップロードに成功。");
        })
        .catch((error) => {
          console.error(error, error.response);
          // Laravel のバリデーションエラーの場合のレスポンスに合わせてエラーメッセージを出力
          if (
            error.response.status === 422 &&
            error.response.data.errors.length !== 0
          ) {
            console.error(error.response.data.errors.image);
            return;
          }
          // その他のエラー
          console.error("画像のアップロードに失敗。");
          return;
        });
    },
  },
};
</script>