前提
Laravel
Vue
参考記事
Laravel + vue.jsでシンプルファイルアップロード
困っていること
・参考記事通りにやっても途中からうまくいかない
・この記事以外、要件を満たすような参考記事が見当たらない
うまくいったこと
参考記事内の「ファイルの保存」セクションまではうまくでき、
storageフォルダ内に画像保存できた。
※その中でも1箇所エラー(現状、画像保存はできたのでスルーしたが念の為載せておきます)
php
1Route::post('fileupload',function(){ 2 dd(request()->all()); 3});
コンソールメッセージ
cosole
1Error: Request failed with status code 500
できないこと
参考記事内の「テーブルへのパスの保存」以下
①テーブルへのパスの保存
該当コード抜粋
php
1// routes/api.php 2// コンソール上には反応があるが、画像保存、データベースアップされてない 3 4Route::post('image',function(){ 5 $file_name = request()->uploadfile->getClientOriginalName(); 6 request()->uploadfile->storeAs('public/',$file_name); 7 $user = User::find(1); 8 $user->update(['file_path' => '/storage/'.$file_name]); 9 return $user; 10});
コンソールメッセージ
cosole
1Object { data: "<!doctype html>\n<html lang=\"ja\">\n<head>\n <meta charset=\"utf-8\">\n <title>LaravelSPA</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <link href=\"/css/app.css\" rel=\"stylesheet\">\n <meta name=\"csrf-token\" content=\"Bzm3rl6i79ghLKGKIXo2n5B1BkqpLe4UrjudBquM\">\n</head>\n<body>\n<div id=\"app\">\n <app></app>\n <router-view></router-view>\n</div>\n<script src=\"/js/app.js\"></script>\n</body>\n</html>", status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
該当コード抜粋
php
1<template> 2 <div class="content"> 3 <h1>File Upload</h1> 4 <p><input type="file" v-on:change="fileSelected"></p> 5 <button v-on:click="fileUpload">アップロード</button> 6 <p v-show="showUserImage"><img v-bind:src="user.file_path"></p> 7 </div> 8</template> 9 10<script> 11export default { 12 data: function(){ 13 return { 14 fileInfo: '', 15 user: '', 16 showUserImage: false 17 } 18 }, 19 methods:{ 20 fileSelected(event){ 21 this.fileInfo = event.target.files[0] 22 }, 23 fileUpload(){ 24 const formData = new FormData() 25 26 formData.append('file',this.fileInfo) 27 28 axios.post('http://127.0.0.1:8000/api/fileupload',formData).then(response =>{ 29 this.user = response.data 30 if(response.data.file_path) this.showUserImage = true 31 }); 32 } 33 } 34} 35</script> 36 37<style> 38.content{ 39 margin:5em; 40} 41</style>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/26 09:08
2019/08/26 09:18
2019/08/26 09:20