目次
1.基本的な流れ
2.まずはエディターに機能を追加する
3.実際にアップしてurlを返す処理
TOAST UI Editor というマークダウンエディターでファイルアップロードする方法に苦戦したので、誰かのためになればと思いアウトプット記事を書いてみます。
Laravel + Vue.js を使った開発です！
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を返す
}
}
これでファイルアップロード機能は完成です！
実際にアップしてみた結果がこちら！
スタイリッシュになった〜！
