Как отправить файл на сервер?

Question

[700Hp]

<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
}

При отправки формы объект formData всегда пустой. На сервер приходит Undefined

Comments

[700Hp]

Вадим,
Попробовал ref(''). Реф читается, но formData так и остаётся после пустой. Прилагаю скрин


Так же пробовал сделать такой вариант, никаких изменений.

const file = ref(File || null)

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

[Вадим]

700Hp, не, я Вам пальцем в небо предположение дал, рефы во вью3 оказалось не так работают -_-

[Вадим]

700Hp, formData в консоле всегда пустая будет. Это несколько не так работает, как Вы, видимо, ожидаете. Выводите не formData, а formData.get('file')

[700Hp]

Вадим, да точно, сработало.
Но на сервере никак прочитать не могу
Заголовок и тело запроса

[Вадим]

700Hp, в нетворке зато можно посмотреть что отправилось в теле запроса.

[700Hp]

Вадим, req.body пустой объект

[700Hp]

Вадим, Спасибо за помощь, решил проблему!

[Вадим]

700Hp, Напишите тогда ответ в соответствующее поле ниже и выберите его в качестве решения или удалите вопрос.
Чтобы другие пользователи сервиса 1) не тратили своё время на ответ 2) с похожим вопросом нашли ответ, не задавая новый.

Спасибо.

Answer 1

[700Hp]

Ответ в комментариях:
formData в консоле всегда пустая будет. Это несколько не так работает, как Вы, видимо, ожидаете. Выводите не formData, а formData.get('file')