1. 基本的な流れ

今回実装させた TOAST UI Editor でのファイルアップロードは、
選択した画像をサーバーにアップロードして、返ってきた URL を textarea に表示させるというものです。
最初の状態だと、下記のように画像の情報がそのまま表示されてしまうため、
アップロードして返ってきたURLを表示できるようにしたいところ。

2. まずはエディターに機能を追加する

TOAST UI Editor は既に出来上がってるマークダウンエディターなので、
そこに URL を返す機能を追加しなければいけません。

まずは、
:options="options"を追加します。

CreateComponent.vue

<div class="form-group">
    <p>本文</p>
    <editor ref="toastUiEditor" :options="options" />
</div>

そして、

CreateComponent.vue


<script>

export default {

...省略

    data() {
        return {
            options: {
                hooks: {
                    addImageBlobHook(blob, callback) {
                        const uploadFile = new FormData(); 
                        uploadFile.append("imageData", blob); 
                        axios
                            .post("/images/store", uploadFile) //コントローラにファイルを送る
                            .then((res) => {
                                callback(
                                    "/storage/image/" + res.data.thumbnail, //返ってきたURLを textarea に返す
                                    "image"
                                );
                            })
                            .catch((err) => {
                                alert(err);
                            });
                    },
                },
            },
        };
    },

こうすることで、画像を選択してアップしたら URL が返ってきてそのまま textarea に表示されます！

3. 実際にアップしてurlを返す処理

実際に画像をアップして URL を返す処理は、コントローラで行われています。

.post("/images/store", uploadFile)
この送信先のコントローラは、こんな感じです。
画像アップ & URL を返しています。

ImageController.php

public function store(Request $request)
{
    if ($request->imageData->isValid()) {
        $filename = $request->imageData->store('public/image'); //ファイル保存
        return ['thumbnail' => basename($filename)]; //保存したファイルのURLを返す
    }
}

これでファイルアップロード機能は完成です！

実際にアップしてみた結果がこちら！
スタイリッシュになった〜！

参考にしたサイト

TOAST UI Editor のファイルアップロード機能

目次

1. 基本的な流れ

2. まずはエディターに機能を追加する

3. 実際にアップしてurlを返す処理