alexleo

anyone?

I have Simple Form in VueJs for creating User's Post ,the post consists of title, keyword ,description and Photos The Backend Logic for storing the post to the database works well,but the problem is I don't know exactly how to get multiple images from the file input

Here is vuejs codes for selecting photos and preview

        <jet-label for="photo" />


        <div class="mt-2" v-show="photoPreview">
            <span class="block rounded w-20 h-20"
                  :style="'background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(\'' + photoPreview + '\');'">
            </span>
        </div>
        <jet-secondary-button class="mt-2 mr-2" type="button" @click.native.prevent="selectNewPhoto">
            Choose Photos
        
        </jet-secondary-button>
        


        <jet-input-error :message="form.error('photo_path')" class="mt-2" />
    </div>

My method:

  createPost() {
           
               if (this.$refs.photo) {
                   for (let index = 0; index < this.$refs.photo.files.length; index++) {
                       let file = this.$refs.photo.files[index]
                  this.form.photo_path = file
                       
                   }
                       
            }
        
            
    
            this.form.post('/post/store', {
                preserveScroll: true
            });
        },

When user click submit button, only one photo is stored in database....How can i fix above codes to allow multiple images upload?