Laravel SparkForm Dateiupload Fehler

Question

Ich arbeite an einem Laravel Spark-Projekt und ich versuche, ein Formular zum Hochladen eines Ordners in meinem S3-Bucket zu bekommen. Ich habe die Form gebaut:

<form enctype="multipart/form-data"> 
    <input type="file" name="resume" v-model="form.resume"> 
    <button @click="updateProfile">Update Profile</button> 
</form> 

Dann habe ich eine vue Komponente einrichten, um das Formular handhaben:

Vue.component('resume-links', { 
    template: '#edit-resume-links', 
    data() { 
    return { 
     form: new SparkForm({ 
      resume: '' 
     }) 
    }; 
}, 
methods: { 
    updateProfile() { 
    console.log(this.form.resume); 
    Spark.post('/route/to/controller', this.form).then(response => { 
     console.log(response); 
    }); 
    } 
} 
}); 

Da ist in meinem Laravel Controller:

$resume = $request->file('resume'); 

$resumeFileName = time() . '.' . $resume->getClientOriginalExtension(); 

$s3 = \Storage::disk('s3'); 
$filePath = '/resumes/' . $resumeFileName; 
$s3->put($filePath, file_get_contents($resume), 'public'); 

Wenn ich versuche, Um das Formular mit einer Datei zu senden, wirft es diesen Fehler: Call to a member function getClientOriginalExtension() on null Ich habe versucht var_dump ing $resume ri ght nach der Einstellung auf die file() und was ich sehe an die Konsole ausgegeben ist eine Reihe von js suchen Code Von allem, was ich es liest wie Dateiuploads mit Laravel ist super einfach und ich weiß nicht, warum ich dieses Problem habe . Jede Hilfe/Beratung wäre willkommen! Vielen Dank!

Answer 1

Zunächst muss die Dateieingabe das Attribut v-el anstelle von v-model haben.

In Ihrem Fall wäre es <input type="file" name="form" v-el:resume />.

Als Nächstes müssen Sie in Ihrer Vue-Komponente die FormData sammeln, damit die Datei an den Server gesendet werden kann. Dateien müssen etwas anders behandelt werden als reine Textfelder und dergleichen.

Fügen Sie diese auf Ihrem methods Objekt:

gatherFormData() { 
    const data = new FormData(); 

    data.append('resume', this.$els.resume.files[0]); 

    return data; 
} 

In Ihrem updateProfile Verfahren Sie nun diese Daten aus, um den Server als POST-Anforderung senden müssen.

updateProfile(e) { 
     e.preventDefault(); 

     var self = this; 

     this.form.startProcessing(); 

     $.ajax({ 
      url: '/route/to/controller', 
      data: this.gatherFormData(), 
      cache: false, 
      contentType: false, 
      processData: false, 
      type: 'POST', 
      headers: { 
       'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN') 
      }, 
      success: function (response) { 
       self.form.finishProcessing(); 

       console.log(response) 
      }, 
      error: function (error) { 
       self.form.setErrors(error.responseJSON); 
      } 
     }); 
    }, 

schließlich in Ihrer Controller-Methode können Sie nun die Datei als normale

behandeln (zB $request->file('resume');)

Umgang mit Dateien mit Laravel ist wirklich ein Kinderspiel - Sie müssen nur sicherstellen, Sie bekommen sie tatsächlich zum Server;)