How to send a file to the server?

Question

JavaScript

<form @submit.prevent="onSubmit" class="form" enctype="multipart/form-data">
      <input type="file" name="file" id="file" ref="file" @change="handleFileUpload">
      <button>
        Тест
      </button>
    </form>

setup() {
    const file = ref(null)

    const onSubmit = async () => {
      const formData = new FormData()
      formData.append('file', file.value[0])
      console.log(formData)
      await test(formData)
    }

    const handleFileUpload = () => {
      file.value = file.value.files
    }


    return {
      onSubmit,
      file,
      handleFileUpload
    }

const $authHost = axios.create({
  withCredentials: true,
  baseURL: process.env.VUE_APP_SERVER_URL,
})

export const test = async (file) => {
  const {data} = await $authHost.post('/documents/create', file, {
    headers: {
      'Content-type': 'multipart/form-data'
    }
  })
  return data
}

When a form is submitted, the formData object is always empty. Undefined comes to the server

Answer 1

The answer is in the comments:
formData in the console will always be empty. It doesn't work quite as well as you might expect. Output not formData, but formData.get('file')