2016-09-03 7 views
1

Laravel Spark 프로젝트에서 작업 중이며 S3 버킷에 폴더를 업로드하는 데 필요한 양식을 얻으려고합니다. 나는 양식을 구축 : 내 laravel 컨트롤러에서 다음Laravel SparkForm 파일 업로드 오류

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로 파일 업로드가 매우 쉽고 왜이 문제가 발생하는지 알지 못합니다. . 모든 도움/조언을 부탁드립니다! 감사!

답변

0

먼저 파일 입력에 v-model이 아닌 v-el 속성이 있어야합니다.

귀하의 경우에는 <input type="file" name="form" v-el:resume />이됩니다.

다음으로 Vue 구성 요소에서 파일을 서버로 보낼 수 있도록 FormData를 수집해야합니다. 파일은 일반 텍스트 필드 등과 약간 다르게 처리해야합니다.

methods 객체에이 추가 :

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

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

    return data; 
} 

당신의 updateProfile 방법은 당신이 지금 POST 요청으로 서버에 떨어져이 데이터를 전송해야합니다.

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

마지막으로, 컨트롤러 메소드에서, 당신은 지금 정상으로 파일을 처리 할 수 ​​

(예를 들어, $request->file('resume');) Laravel의 파일을 처리

정말 바람입니다 - 당신은 그냥 확인해야 실제로 서버에 연결합니다.)