Vue.jsでペーストされた画像をサーバ(Laravel)に送信！【サンプルあり】｜ProgLearn

みなさん、こんにちは。どんぶラッコです。

本日は、画面上にペーストされた画像を取得して、Laravel経由でS3に保存するまでの一連の流れを一緒に実装してみましょう！

どんぶラッコ

筆者はChromeでしか検証していません。Edgeなどでは別の方法で画像ファイルを取得できるとのことなので、そちらも参照してみてください！

ペーストされた画像から情報を取得

今回はVue.jsを使って実装していきます。

まずは <template> 部分から。

<template>
  <div 
    contenteditable 
    @paste="doPasteActions($event)" 
  />
</template>

v-on:paste を使うことでペースト処理が実行された時のイベントを拾っています。

次に、<script> です。

<script>    
export default{  
  // 中略
  methods: {
    doPasteActions(event){
      event.preventDefault()
      if (event.clipboardData.types[0] === 'Files') {
        const imageFile = event.clipboardData.items[0].getAsFile()

        const fd = new FormData()
        fd.append('image', imageFile)

        const { data } = await axios.post('自分のURL', fd)
        const imgUrl = data.url
      }
    }
  }
}
</script>

event.preventDefault() で、通常のpaste処理を無効化しています。

その上で、ペーストされたものがファイルかどうかを比較します(7行目)。

ペーストされた画像は event.clipboardData.items[0].getAsFile() を走らせることで取得することが可能です。

そして取り出すことができた画像データを postメソッドに乗せてLaravelに送ります。今回は “フォーム内でアップロードされた画像” としてサーバに送るため、 FormData インスタンスを作成して、それにimageを挿入しています。

どんぶラッコ

POST通信をするときに使っているaxiosをインポートしていない場合は予めインストールしてから使おう！

グランくん

axiosには自分で作ったAPIのURLを記入しよう！

これで、vue.jsでサーバに投げる部分は完成です。次にLaravelをみてみましょう。

Laravel側の処理

api.php の記述は省略します。先ほどのVue.jsサンプル内 自分のURL に対応したURIを作成しましょう。

では、LaravelのController内に記述していきましょう。

class FileController extends Controller
{
    public function storeImage(Request $request){
        $image = $request->file('image');
        $path = Storage::disk('s3')->putFile('images', $image);
        return [
            'url' => Storage::disk('s3')->url($path)
        ];
    }
}

Laravelの方はめちゃくちゃ単純ですね。 $request->file('image') ファイルで取り出すことができます。

あとはイメージを取り出すだけです。今回は S3に投げています。

みなさんも是非連携にチャレンジしてみましょう！