使用vuejs和laravel上傳文件不帶表格

Question

我正在使用vue.js 2.1和Laravel 5.4上傳沒有表單的組件中的文件。

問題：在服務器端，此語句return $request->file('my_file');返回null。爲什麼？

這是VUE組件的樣子：

<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> 

在服務器端，我有以下方法：

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

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

我缺少什麼？所以我可以使用Laravel提供的函數$request->file('my_file')->store();來上傳文件。

EDIT 我已經改變了HTTP動詞從put到post像這樣：

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方法：

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應用：

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

欲瞭解更多信息：Laravel documentation

Answer 2

你的觀點應該是這個樣子

<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>