コンポーネント。 vue.http.post（）経由でファイルでリクエストを送信

Question

私はvuejs2コンポーネントをページに持っています（単一ファイルコンポーネント）。 1つのファイル入力を持つシンプルなブートストラップモーダルウィンドウです。

<template> 
<div class="modal fade" id="upload-file-modal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">Upload file</h4> 
      </div> 
      <form id="app-file-upload-form" name="appFileUploadForm" @submit.prevent="uploadAppFile" novalidate enctype="multipart/form-data"> 
       <div class="modal-body"> 
        <div class="form-group"> 
         <label for="app-file-fileinput">File</label> 
         <input type="file" name="file" id="app-file-fileinput" class="form-control" v-el="file" @change="attachFile"> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="submit" class="btn btn-primary">Upload</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

<script> 
export default { 
    data() { 
     return { 
      file: '' 
     } 
    }, 

    methods: { 
     attachFile(e) { 
      var files = e.target.files || e.dataTransfer.files; 

      if (!files.length) 
       return; 

      this.file = files[0]; 
     }, 

     uploadAppFile() { 
      console.log(this.file); 
      Vue.http.post('/api/v1/apps/' + this.appId + '/files', { file: this.file}).then((response) => { 
       console.log(response); 
      }, (response) => { 
       console.log(response); 
      }); 
     } 
    } 
} 

ので、私はそれを扱うためのlaravelコントローラを持っている：私はファイルだけでは何をされて

一つのファイル（無mutlifileアップロードまたはなど）をアップロードする必要があります。

public function upload(Request $request) 
{ 
    $attachedFile = $request->file; 

    return response()->json($request->all()); 
} 

私はちょっとデバッグのためにreturn response-> json（）を入れました。ファイルを添付すると、コンポーネント（モデル？）フィールドに付いていて、空ではありません。しかし、vue.http.postがファイルを生成すると、空のオブジェクトになります。

最初はconsole.log（ファイル） です。2番目はサーバーの応答です。

私もそれがうまくいきませんでした...）（いるFormDataてみました。 ps：コードからバージョンフィールドを削除しました。

Answer 1

formdataで何度かして、ファイルのアップロードができました。変数をメソッドの中に入れてください。

uploadAppFile() { 
    let data = new FormData(); 
    data.append('file', this.file); 

    Vue.http.post('/api/v1/apps/' + this.appId + '/files', data).then((response) => {}); 
}