Ajax Datei-Upload Vue JS

Question

Ich versuche, eine Datei über Ajax mit Vue JS hochladen - aber der Server antwortet immer, dass die Datei ein Bild sein muss (Es funktioniert, wenn es nicht Ajax verwendet). Das Setup ich habe, ist wie folgt:

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

Und meine Daten:

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

Gibt es etwas Bestimmtes ich für das Hochladen von Dateien tun müssen?

Answer 1

Ich habe offenbar die Lösung dafür gefunden. Zuerst musste ich das V-Modell aus dem Formularelement (und jedem Element innerhalb dieses Formulars) entfernen. Senden Sie dann, anstatt v-model zu posten, die zu sendenden Daten mit FormData. Hier

ein Beispiel:

//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));