Question

我在VueJs中具有用于创建用户帖子的简单表单，该帖子包含标题，关键字，描述和照片用于将帖子存储到数据库的后端逻辑效果很好，但是问题是我不知道如何确切地从文件输入中获取多个图像

这是用于选择照片和预览的vuejs代码

<div class="col-span-6 sm:col-span-4">
            <input type="file" class="hidden"
                        ref="photo"
                        multiple
                        @change="updatePhotoPreview">

            <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>

方法

 methods: {
        createPost() {
             if (this.$refs.photo) {
                this.form.photo_path = this.$refs.photo.files[0]
            }
          
            this.form.post('/post/store', {
                preserveScroll: true
            });
        },

          selectNewPhoto() {
            this.$refs.photo.click();
        },

}

当用户单击提交按钮时，数据库中仅存储一张照片...。如何解决以上代码以允许上传多张图像？

允许在VueJ中上传多张图片

0 个答案: