时间戳

首页 > 解决方案 > （Vue 和 Firebase）我在将多个图像保存在数组中时遇到问题

javascript - （Vue 和 Firebase）我在将多个图像保存在数组中时遇到问题

问题描述

我正在尝试一个图像滑块，而不是手动插入图像，我想将图像上传到 Firestore 并将它们存储在一个数组中，然后将其返回到图像滑块。

我已经有一个上传图片的代码，所以我想我会重复使用它，但是我没有一个用于文件上传的输入字段，而是创建了 3 个。我认为我需要做的就是告诉应用程序保存图片 url在数组中，但这没有给出任何结果。它仅将第一张图片上传并存储在数组中，但其他两张图片不会上传。

这个问题的解决方案是什么？

导入滑块图像

<form @submit.prevent="handleSubmit">
      <h4>Create new content</h4>
      <input type="text" required placeholder="Insert title" v-model="sliderTitle">
      <label>Choose images for your slider</label>
      <input type="file" @change="handleChange">
      <input type="file" @change="handleChange">
      <input type="file" @change="handleChange">
      <div class="error">{{ fileError }}</div>
      <button v-if="!isPending">Create</button>
      <button v-else disabled>Saving...</button>
   </form>
</template>

<script>

import { ref } from 'vue'
import useStorage from '@/composables/useStorage'
import sliderCollection from '@/composables/sliderCollection'
import { timestamp } from '@/firebase/config'
import { useRouter } from 'vue-router' 

export default {
    setup() {
       const { filePath, url, uploadImage } = useStorage()
       const { error, addDoc } = sliderCollection('slider')
       const sliderTitle = ref('')
       const file = ref(null)
       const fileError = ref(null)
       const isPending = ref(false)
       const router = useRouter();

       const handleSubmit = async () => {
          if (file.value) {
             isPending.value = true
             await uploadImage(file.value)
             await addDoc({
                sliderTitle: sliderTitle.value,
                imageUrl: [url.value],
                filePath: filePath.value,
                createdAt: timestamp()
             })
             isPending.value = false
             if(!error.value) {
                router.push({ name: "Home" })
             }
          }
       }

       // allowed file types

       const types = ['image/png', 'image/jpeg']

       const handleChange = (e) => {
          const selected = e.target.files[0]
          console.log(selected)

          if (selected && types.includes(selected.type)) {
             file.value = selected
             fileError.value = null 
          } else {
             file.value = null
             fileError.value = 'Please select an image of the type JPG or PNG'
          }
       }

       return {
          sliderTitle,
          handleSubmit,
          handleChange,
          fileError,
          file,
          isPending
       }
    }
}
</script>

滑块本身

<template>
  <div v-for="content in slider" :key="content.id">
    <img :src="content.imageUrl" />
  </div>
</template>

    <script>
    const images = [];
    export default {
      props: ['slider'],
      name: "ImageSlider",
      data() {
        return { index: 0, imageUrl: images[0] };
      },
      methods: {
        next() {
          this.index = (this.index + 1) % images.length;
          this.imageUrl = images[this.index];
        },
        autoChangeSlide() {
          setInterval(() => {
            this.next();
          }, 3000);
        },
      },
      beforeMount() {
        this.autoChangeSlide();
      },
    };
    </script>

标签： javascriptfirebasevue.js

解决方案

如果您想在一个请求中上传多张图片，您需要在 html 中添加多个关键字，例如：

<input type="file" @change="handleChange" multiple>

那么您需要遍历文件以添加多个图像，例如：

await Promise.all(files.map(async file=>{
if (file.value) {
             isPending.value = true
             await uploadImage(file.value)
             await addDoc({
                sliderTitle: sliderTitle.value,
                imageUrl: [url.value],
                filePath: filePath.value,
                createdAt: timestamp()
             })
             isPending.value = false
             if(!error.value) {
                router.push({ name: "Home" })
             }
          }
}))

我希望这会有所帮助，因为您的问题有点抽象，无法看出真正的问题是什么。那里可能是我的语言障碍。

推荐阅读