vue.js 画像をリサイズしてサーバーに保存

画像をリサイズする
https://www.npmjs.com/package/vue-image-upload-resize


スマホからサーバーに画像をアップするとき、やっぱり重い。
5,6秒もかかっちゃうとユーザーが離れちゃう。

javascript側で画像をリサイズして、サーバー側でもリサイズすると
画像が荒くなっちゃう気もするが背に腹は変えられない。


・vue.js 側で 画像をリサイズ
・base64形式にする
・サーバーに送信
・送信されてきたbase64を画像ファイルにする
・/tmp/ フォルダに保存して返す



コピペで動きます。


```hoge.vue

<style>
    #fileInput {
        display: none;
    }

</style>

<template>
    <div>

        <img :src="kansei"/>

        {{kansei}}


            <image-uploader
                    :preview="true"
                    :maxWidth="512"
                    :quality="1.00"
                    :className="['fileinput', { 'fileinput--loaded': hasImage }]"
                    :debug="1"
                    doNotResize="['gif', 'svg']"
                    :autoRotate="true"
                    outputFormat="verbose"
                    accept="video/*,image/*"
                    @input="setImage"
            >
                <label for="fileInput" slot="upload-label" style="width: 100%;text-align: center;">
                    <figure>
                        <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="32"
                                height="32"
                                viewBox="0 0 32 32"
                        >
                            <path
                                    class="path1"
                                    d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
                            ></path>
                        </svg>
                    </figure>
                    <span class="upload-caption">{{
            hasImage ? "置き換え" : "タップしてアップロード"
          }}</span>
                </label>
            </image-uploader>

    </div>
</template>

<script>

    import ImageUploader from 'vue-image-upload-resize'
    Vue.use(ImageUploader);

    export default {

        data() {
            return {
                hasImage: false,
                image: null,
                kansei:''
            };
        },
        methods: {
            setImage(output) {

                this.hasImage = true;
                this.image = output;

                let dataform = new FormData();
                dataform.append('img',output.dataUrl);
                dataform.append('type',output.info.type);

                //サーバー側で保存
                axios.post('/hoge/test/', dataform).then(e => {

                    this.kansei = e.data.res;

                }).catch((error) => {
                    console.log("エラー");
                });

            }
        }
    };
</script>


```

で、サーバー側

```HogeController.php

class HogeController extends Controller
{

    public static function test(request $request)
    {

        $img = str_replace('data:'.$request->type.';base64,', '', $request->img);
        $img = str_replace(' ', '+', $img);
        $fileData = base64_decode($img);


        $tmp = explode("/",$request->type);
        $ex = $tmp[1];

        if($ex == 'jpeg'){
            $ex = 'jpg';
        }

        
        //saving ここで画像を重ねる
        $fname = 'test_'.time().'.'.$ex;

        $path = 'tmp/'.$fname;
        $file = public_path("/".$path);
        file_put_contents($file, $fileData);


        return response()->json(['res'=> '/tmp/'.$fname]);

    }


```