如何使用vue 3上传多个文件到Firebase 8？

Question

我正在学习 vue js 并尝试制作电影应用程序，但我面临将多个文件加载到 firebase 8 的问题，所有代码在上传单个文件时工作但在尝试多个上传时不工作，结果是一个文件在存储中未定义并且在火炉。 我将 Vue 3 与可组合项一起使用。

AddMovie.vue

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <h4>Create a New Movie</h4>
      <input type="text" required placeholder="Movie Title" v-model="movieTitle">
      <textarea required placeholder="Movie description" v-model="description"></textarea>
      
      <label>Upload Movie Image</label>
      <input type="file" @change="handleChange" multiple>
      <div class="error">{{ fileError }}</div>

      <button v-if="!isPending">Create</button>
      <button v-else disabled>Saving...</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue'
import useStorage from '@/composables/useStorage'
import useCollection from '@/composables/useCollection'
import { timestamp } from '@/firebase'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const { url, uploadImage } = useStorage()
    const { error, addDoc } = useCollection('movies')
    const router = useRouter()

    const movieTitle = ref('')
    const description = ref('')
    const files = ref([])
    const fileError = ref(null)
    const isPending = ref(false)

    const handleSubmit = async () => {
      if (files.value) {
        isPending.value = true
        await uploadImage(files.value)
        const res = await addDoc({
          movieTitle: movieTitle.value,
          description: description.value,
          imageUrl: url.value, // <==== here where i want store urls of uploaded images
          createdAt: timestamp()
        })
        isPending.value = false
        if (!error.value) {
          router.push({ name: 'Success'})
        }
      }
    }


    const handleChange = (e) => {
      let selectedFiles = e.target.files;
      if (selectedFiles) {
    for (const file of selectedFiles) {
        files.value.push(file)
    }
    console.log(files.value)
}

    }
    
    return { title, description, handleSubmit, fileError, handleChange, isPending }
  }
}
</script>

useStorage.js

import { storage } from '../firebase'
import { ref } from "vue"
import getUser from "./getUser"

const { user } = getUser()

const useStorage = () => {
  const error = ref(null)
  const url = ref(null)
  const filePath = ref(null)

  const uploadImage = async (file) => {
    filePath.value = `covers/${user.value.uid}/${file.name}`
    const storageRef = storage.ref(filePath.value)

    try {
      const res = await storageRef.put(file)
      url.value = await res.ref.getDownloadURL()
    } catch (err) {
      console.log(err.message)
      error.value = err
    }
  }


  return { uploadImage, url, filePath, error }
}

export default useStorage;

我确定我做错了什么，但我无法弄清楚是什么和在哪里，关于如何解决这个问题的任何方式和想法，我将不胜感激