Upload image with Axios + Vue 3

vue-img-upload.vue

<template>
<input type="file" @change="handleFileUpload($event)"/>
</template>

<script>
import axios from 'axios'
import { reactive, toRefs } from 'vue'

export default {

  setup () {
  
    const state = reactive ({
      photo: null,
    })
  
    const handleFileUpload = (event) => {
            state.photo = event.target.files[0];
    }
    
    let formData = new FormData();
      formData.append('photo', state.photo)

            axios
                .post('URL', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        Authorization: 'Bearer ' + token,
                    },
                })
    
    return {
      ...toRefs(state),
      handleFileUpload,
    }
  }
}

</script>

<style>
</style>

Note: only use headers if it's necessary for your request.