VueJSとLaravel 5.3を使用してファイルをアップロードする方法

Question

VueJS、Laravel 5.3とPassport認証モジュールを使用してSPAを開発しています。

マイコードまでです。私はファイル名を選択することができます。うまく動作しますが、選択したファイルを送信して、サーバーにファイルをアップロードする要求を投稿する方法はありますか？

<script> 
    import {mapState} from 'vuex' 
    export default{ 
    computed: { 
     ...mapState({ 
     userStore: state => state.userStore 
     }) 
    }, 
    data() { 
     return { 
     fax: { 
      files: '', 
      image: '' 
     } 
     } 
    }, 
    methods: { 
     onFileChange (e) { 
     this.fax.files = e.target.files || e.dataTransfer.files 
     if (!this.fax.files.length) { 
      return 
     } 
     console.log(this.fax.files) 
     } 
    }, 
    created() { 
     this.$store.dispatch('setUserDid') 
    } 
    } 
</script> 

<template> 
<form action="" method="post" enctype="multipart/form-data"> 
<input type="file" multiple @change="onFileChange"> 
<input type="text" name="group" > 

<ul> 
    <li v-for="file in fax.files"> 
     {{ file.name }} 
    </li> 
</ul> 
</template> 

これまでのところ、{{fax.files}}を使用してページにファイル名を表示することができます。 私のサーバー側（APIエンドポイント）からファイルをキャッチできるように投稿を投稿する方法は？私はグーグルとコーディングを試みましたが、できませんでした。

Answer 1

[OK]私はこの作業を成功させることができました。ファイルをアップロードする前に、私はAjax経由で投稿していた配列を持っていました。 ファイルのアップロードを処理するために以下のように変更しました。

基本的には、ファイルをアップロードするときにFormDataオブジェクトを送信する必要があります。フォームを送信するときにFormDataオブジェクトをデフォルトで使用します。ただし、配列をポストする場合にのみ、それらの配列値をFormDataオブジェクトに最初に追加する必要があります。あなたは以下のコードの意味を理解することができるはず

...

var formData = new FormData(); 

       jQuery.each(this.comment.file, function(i, file) { 
        formData.append('file[]', file); 
       }); 
       formData.append('body', this.comment.body); 
       formData.append('comments_room_id', this.comment.comments_room_id); 
       formData.append('id', this.comment.id); 
       formData.append('name', this.comment.name); 

       this.$http.post('/api/comment/store', formData).then(function (response) {