axiosを利用して、Laravelにファイルを送信する。

Laravelとvueを利用するときに、よくvue側でファイルのアップロードをコントロールすることがあります。

たとえ、

vueのtemplateの中に、下記のfile input要素がある。

<input id="logo_image" type="file"
       lang="ja"
       class="custom-file-inout form-control"
       v-bind:class="{ 'is-invalid': has_error }"
       name="logo_image"
       @change="onFileChange"
>

method onFileChangeの中に、

onFileChange(e) {
    const file = e.target.files[0];
    if (file) {
        this.validate(file);
    }
},

e.target.files[0]のようにアップロードしたファイルを取得することができますが、取得したファイルはどうやって、axiosを利用して、Laravelのバックエンドに送信することは問題になります。

下記のstackflowの回答を参照したら、わかると思います。

https://stackoverflow.com/questions/42907747/how-to-send-a-file-via-axios-to-laravel

methods: {
  'successUpload': function (file) {

    let data = new FormData();
    data.append('file', document.getElementById('file').files[0]);

    axios.post('/Upload/File',data).then(function (response) {
        console.log(response.data);
    });
  }
}

FormDataを作成し、取得したファイルをformdataの一部に変更して、post/getでcontrollerに送信すれば、controller側で通常のファイルとして扱うことができます。

laravelのファイル操作は以下のリンクを参照してください。

https://laravel.com/docs/6.0/filesystem#file-uploads