Загрузка файла Ajax Vue JS

Question

Я пытаюсь загрузить файл через Ajax с помощью Vue JS - однако сервер продолжает отвечать, говоря, что файл должен быть изображением (он работает, когда он не использует ajax). Установка у меня есть выглядит следующим образом:

<input type="file" name="avatar" v-model="profileFormData.avatar"> 

И мои данные:

profileFormData: { 
      "name": '', 
      "email": '', 
      "avatar": '', 
     }, 

Есть ли что-то конкретное, что нужно сделать для загрузки файлов?

Answer 1

Кажется, я нашел исправление для этого. Во-первых, мне пришлось удалить v-модель из элемента формы (и каждого элемента в этой форме). Затем вместо публикации v-модели получите данные для отправки с использованием FormData.

Вот пример:

//Pass the form into a new FormData object 
var formData = new FormData(this.el); 

//Pass through the object instead of data passed via a v-model 
    this.vm 
     .$http[this.getRequestType()](this.el.action, formData) 
     .then(this.onComplete.bind(this)) 
     .catch(this.onError.bind(this));