Laravel SparkFormファイルアップロードエラー

Question

私はLaravel Sparkプロジェクトに取り組んでいます。私はS3バケットにフォルダをアップロードするためのフォームを取得しようとしています。私は、フォームを構築しています：私のlaravelコントローラで次に

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

：

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

は、その後、私は、フォームを処理するように設定VUEコンポーネントが提出してい

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

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

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

私がしようこのエラーをスローするファイルをフォームに送信する： Call to a member function getClientOriginalExtension() on null 私は試しましたvar_dump ing $resume ri ghtをfile()に設定した後、コンソールに出力された内容はjsのコードが であることを確認しています。私が読んでいるすべてのものは、Laravelのファイルアップロードのように見えます。なぜこの問題があるのか​​わかりません。どんな援助/アドバイスもありがとう！ありがとう！

Answer 1

まず、ファイル入力にv-modelではなくv-elという属性が必要です。

あなたの場合、<input type="file" name="form" v-el:resume />になります。

次に、Vueコンポーネントでは、サーバーにファイルを送信できるようにFormDataを収集する必要があります。ファイルはプレーンテキストフィールドなどと少し違って扱われなければならない。あなたは今、POSTリクエストとしてサーバにオフこのデータを送信する必要があなたのupdateProfile方法で

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

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

    return data; 
} 

：

は、あなたのmethodsオブジェクトにこれを追加します。

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); 
      } 
     }); 
    }, 

最後に、あなたのコントローラメソッドでは、あなたが今、通常の

としてファイルを扱うことができるLaravelを持つファイルを処理（例えば、$request->file('resume');）

は本当に簡単です - あなただけを確認する必要があります実際にサーバーに接続しています）;