AjaxファイルのアップロードVue JS

Question

Vue JSを使用してAjax経由でファイルをアップロードしようとしていますが、サーバーはファイルがイメージである必要があると応答し続けます（ajaxを使用していない場合でも機能します）。

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

そして、私のデータは次のとおりです：次のように私が持っている設定がある

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

私は、ファイルのアップロードのために行う必要があり、特定の何かがありますか？

Answer 1

私はこのための修正を見つけたようです。最初に、フォーム要素（およびそのフォーム内のすべての要素）からvモデルを削除する必要がありました。その後、v-modelを投稿するのではなく、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));