vue3使用axios上傳文件

//下載axios
npm i axios
//在main.js掛載到全局
import axios from "axios";
const app = createApp(App);
app.config.globalProperties.$axios = axios;


//頁面使用
<template>
  <input type="file" @change="updataFile" />
</template>
<script setup>
      import { getCurrentInstance } from "vue";
      //vue2和vue3原型上有點不同，
    const { proxy } = getCurrentInstance();//獲取原型
    const Axios = proxy.$axios;//Axios就是掛在的原型（相當於vue2中的this.$axios）
    const updataFile = (e) => {
      let file = e.target.files[0];//拿到上傳的file
      let param = new FormData();//創建form對象
      param.append("file", file);//為創建的form對象增加上傳的文件
      param.append("id", "1");//如果需要上傳其他字段，在這里增加
      let config = { headers: { "Content-Type": "multipart/form-data" } }//修改請求頭
      let url = "你的上傳地址";
      Axios.post(url, param, config).then((res) => {
        console.log(res, "res");
      });
    }
</script>