ブラウザで画像圧縮してアップロード Vue.js

参考ページ
○　https://blog.capilano-fw.com/?p=3578
→サンプルコードそのままでも使える
×　https://qiita.com/nobu17/items/64f51d43827424db4b6a
→調整が必要。高機能

Vueの用意

参考ページの通り

Laravelのコントローラ

ファイル名の変更などはお好みで。

    public function resize_ajax(Request $request) {

        if($request->has('images')) {
            foreach ($request->images as $key => $photo) {
                // $photo->store('images'); // storage/app/imagesフォルダに保存

                $file_name = $photo->getClientOriginalName();
                $photo->storeAs('images', $file_name); // storage/app/imagesフォルダに保存
            }
        }
        return $request;
    }

以上

formDataやaxiosの知識がないとつまずきましたが、
参考ページのとおりにやればできました。