Vue.jsで画像データをPOSTしたかったのでformDataを使って実現しました

【画面側】
type="file" の入力欄と送信ボタンを用意
画像の選択(input)が行われたとき、送信ボタンが押されたときにそれぞれ処理を行う

 <template>
     <input @change="fileSelect" type="file" name="file">
     <button @click="upload" type="submit">送信</button>
 </template>

【js側】
この場合はTestViewという名前でコンポーネントを作っています。

<script>
    export default {
        name: "TestView",
        data: function () {
            return {
                selected_file: null
            }
        },
        methods: {
            //ファイル選択時の処理
            fileSelect: function(e) {
                //選択したファイルの情報を取得しプロパティにいれる
                this.selected_file = e.target.files[0];
            },
            //送信処理
            upload: function() {
                //formDataをnewする
                let formData = new FormData();
                //appendでデータを追加(第一引数は任意のキー)
                //他に送信したいデータがある場合にはその分appendする
                formData.append('file', this.selected_file);

                let config = {
                    headers: {
                        'content-type': 'multipart/form-data'
                    }
                };

                axios.post('/product', formData, config)
                    .then(function(response) {
                        console.log('成功')
                    })
                    .catch(function(error) {
                        console.log('失敗')
                    })
            }
        }
    }
</script>

【Laravel コントローラ側】
サーバ側でのデータの受け取り方

 public function test(Request $request)
    {
        //js側で設定したキーを指定
        $file = $request->file('file');
    }