フォームなしでvuejsとlaravelを使用してファイルをアップロードする

Question

vue.js 2.1とLaravel 5.4を使用して、フォームのないコンポーネントからファイルをアップロードしています。

問題：サーバー側では、この文return $request->file('my_file');はnullを返します。どうして？

これはVUEのコンポーネントがどのように見えるかです：

public function update(Request $request) 
{ 
    return $request->file('my_file'); 

    // $request->file('my_file')->store(); 
} 

は、私が何をしないのです：

サーバー側で

<template> 
    <input id="my_file" type="file" @change="fileChanged($event)"> 
    <button v-if="my_file" @click="update">Upload</button> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      my_file: null, 
     } 
    }, 

    methods: { 
     fileChanged(e) { 
      var files = e.target.files || e.dataTransfer.files; 
      if (!files.length) 
       return; 
      this.createImage(files[0]); 
     }, 

     createImage(file) { 
      var image = new Image(); 
      var reader = new FileReader(); 
      var vm = this; 

      reader.onload = (e) => { 
       vm.my_file = e.target.result; 
      }; 
      reader.readAsDataURL(file); 
     }, 

     update() { 
      axios.put('/api/update/', { 
       my_file: this.my_file, 
      }) 
      .then(response => { 
       console.log(response.data); 
      }) 
      .catch(error => { 
       console.log(error); 
      }); 
     } 
    } 
} 
</script> 

、私は次のような方法がありますか？だから、私はLaravelによって提供された関数$request->file('my_file')->store();を使ってファイルをアップロードすることができます。

EDIT は、私はそうのようpostへputからのHTTP動詞を変更しました：

コントローラで

trySomeThing() { 
    var data = new FormData(); 
    var file = this.$refs.fileInput.files[0]; 
    data.append('attachment_file', file); 
    data.append('msg', 'hello'); 

    axios.post('/api/try', data) 
     .then(response => { 
      console.log(response.data) 
     }); 
}, 

、私が持っている：

public function try(Request $request) 
{ 
    if ($request->hasFile('my_file')) { 
     $file = $request->file('my_file'); 
     //$file->getFilename(); 
     return var_dump($file); 
    } else { 
     return var_dump($_POST); 
    } 
} 

リクエストヘッダが含まれています

返されたr esponseはこれを示しています

Answer 1

まず、あなたのファイル入力にVueの参照を追加します。その後

<input id="my_file" type="file" @change="fileChanged($event)" ref="fileInput"> 

あなたupdate方法更新：詳細情報については

if ($request->hasFile('my_file')) { 
    $file = $request->file('my_file'); 
    dd($file); 
} 

：あなたのlaravelアプリケーションで

update() { 
    var data = new FormData() 
    var file = this.$refs.fileInput.files[0] 
    data.append('my_file', file) 
    axios.put('/api/update/', data)  
    .then(response => { 
     console.log(response.data) 
    }) 
    .catch(error => { 
     console.log(error) 
    }); 
} 

をLaravel documentation

Answer 2

あなたのビューは、この

ようになるはずですvuejsで

<template> 
<div class="row"> 
    <div class="col-md-12"> 
     <div class="col-md-2"> 
      <img :src="image" class="img-responsive"> 
     </div> 
     <div class="col-md-8"> 
      <input type="file" v-on:change="onFileChange" class="form-control"> 
     </div> 
     <div class="col-md-2"> 
      <button class="btn btn-success btn-block" @click="upload">Upload</button> 
     </div> 
     </div> 
    </div> 
</template> 
<style scoped> 
img{ 
    max-height: 36px; 
} 
</style> 
<script> 
    export default{ 
    data(){ 
     return { 
      image: '' 
     } 
    }, 
    methods: { 
     onFileChange(e) { 
      let files = e.target.files || e.dataTransfer.files; 
      if (!files.length) 
       return; 
      this.createImage(files[0]); 
     }, 
     createImage(file) { 
      let reader = new FileReader(); 
      let vm = this; 
      reader.onload = (e) => { 
       vm.image = e.target.result; 
      }; 
      reader.readAsDataURL(file); 
     }, 
     upload(){ 
      axios.post('/api/upload',{image: this.image}).then(response => { 

      }); 
     } 
    } 
} 
</script>