Laravel×Vueで、動的な画像保存&表示

完全honaki用
悪しからず

保存 & 同コンポーネント内で表示

ProfileEditComponent.vue

<template>
    <div class="container">
        <h2 class="mt-5 text-center">プロフィール画像更新</h2>
        <div class="form-group">
            <label for="id">↓下をクリックして画像をアップロードしてください</label><br>
            <input type="file" v-on:change="fileSelected">
        </div>
        <button v-on:click="fileUpload" class="btn btn-danger">アップロード</button>
        <p v-show="showUserImage"><img v-bind:src="user.file_path"></p>
    </div>
</template>

<script>
export default {
    data: function(){
        return {
          fileInfo: '',
          user: '',
          showUserImage: false
        }
    },
    methods:{
        fileSelected(event){
            this.fileInfo = event.target.files[0]
        },
        fileUpload(){
            const formData = new FormData()

            formData.append('file',this.fileInfo)

            axios.post('/api/profile/:profileId/edit',formData).then(response =>{
                this.user = response.data
                if(response.data.file_path) this.showUserImage = true
            });
        }
    }
}
</script>

api.php

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Auth::routes();

Route::group(['middleware' => 'auth'], function () {
    // マイページ一覧表示
    Route::resource('/profile', 'ProfileController');
    // マイページ画像保存
    Route::post('/profile/:profileId/edit', 'ProfileController@file_up');
});

ProfileController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Auth;
use App\Budget;
use App\Spending;
use App\User;
use Carbon\Carbon;

class ProfileController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        if (Auth::check()) {
            // ユーザーはログイン済み
            // $profile = Auth::user();
            // $profile = Auth::guard('api')->user()->get();
            // $profile = Auth::guard('api')->user()->get();
            // $profile = Auth::guard('api')->user()->get();
            // →これらはユーザー情報を取得できなかった

            $id = Auth::id(); 
            $profile = User::where('id', $id)->get();
            return $profile;
        }
    }
    
    public function file_up()
    {
        $file_name = request()->file->getClientOriginalName();
    
        request()->file->storeAs('public/',$file_name);
    
        // $user = User::find(1);
        $id = Auth::id(); 
        $user = User::find($id);

    
        $user->update(['file_path' => '/storage/'.$file_name]);
    
        return $user;
    }

publicにシンボリックリンクを貼る

ターミナル
$ php artisan storage:link

以下が出てくればOK
The [public/storage] directory has been linked.

参考：https://reffect.co.jp/vue/vue-js-laravel-file-upload#i-7

テーブルへのパスの保存

追加したfile_path列に書き込みを許可するためにモデルファイルUser.phpのfile_pathを$fillable変数に追加する

User.php

protected $fillable = [
    'name', 'email', 'password','file_path'
];

参考：https://reffect.co.jp/vue/vue-js-laravel-file-upload#i-8

別のコンポーネント表示する場合

ProfileComponent.vue

<template>
    <div class="container">
        <h2 class="mt-5 text-center">プロフィール</h2>
        <form v-for="(profile, index) in profiles" :key="index">
            <div class="profile-picture mx-auto mt-3">
                // ⭐️ここ
                <img v-bind:src="profile.file_path" class="img-fluid" alt="Profile Picture">
            </div>
            <router-link v-bind:to="{name: 'profile.edit', params: {profileId: profile.id}}">
                <div class="mb-5 text-center"><button type="submit" class="btn btn-primary">編集</button></div>
            </router-link>
            <div class="form-group">
                <label for="id">名前</label>
                <input type="text" class="form-control" id="name" readonly v-model="profile.name">
            </div>
            <div class="form-group ">
                <label for="id">メールアドレス</label>
                <input type="text" class="form-control" id="email" readonly v-model="profile.email">
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                profiles: []
            }
        },
        methods: {
            getProfiles() {
                axios.get('/api/profile')
                    .then((res) => {
                        this.profiles = res.data;
                    });
            }
        },
        mounted() {
            this.getProfiles();
        }
    }
</script>

別コンポーネントでも同コンポーネント内同様、
「定義した箱+テーブルのカラム名」で表示ができた。
今回はreturn user''や return profile[]のこと。

---

参考：Laravel + vue.jsでシンプルファイルアップロード
https://reffect.co.jp/vue/vue-js-laravel-file-upload