Плохо работает отправка multiple-img при итерации

Как я могу сделать так что бы оно отправлялось сразу объектом, а не отдельно строками?

Как отправляется : как должно:

мой код: Когда я отправляю

const submit = async() => {
  picture.value = null;
  for(let i = 0; i < photos.value.length; i++) {
    console.log('arr - all',photos.value)
    console.log('arr - all',photos.value[i].name)
    const storageRef = firebase.storage().ref(`${photos.value[i].name}`).put(photos.value[i]);
    storageRef.on(`state_changed`, snapshot => {
          uploadValue.value = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        }, error => {
          console.log(error.message)
        },
        () => {
          uploadValue.value = 100;
          storageRef.snapshot.ref.getDownloadURL().then((url) => {
            console.log(url)
            store.dispatch('request/sendPhotos', url)
          });
        }
    );
  }
  emit('created')
}

когда я выбираю то есть при изменении

const previewImage = (event) => {
  uploadValue.value = 0;
  picture.value = null;
  photos.value.push(event.target.files[0])
  console.log(photos.value)
}

весь мой код:

<template>
  <div class="form-control image">
    <div class="form-control">
      <p>Upload an image to Firebase:</p>
      <input type="file" multiple @change="previewImage" accept="image/">
      <input type="file" multiple @change="previewImage" accept="image/">
    </div>
    <div>
      <p>Progress: {{ uploadValue.toFixed() + "%" }}
        <progress id="progress" :value="uploadValue" max="100"></progress>
      </p>
    </div>
    <div v-if="imageData!=null">
      <img class="preview" :src="picture">
      <br>
    </div>
  </div>
  <button type="submit" class="btn" @click="submit">Создать</button>
  <app-message></app-message>
</template>

<script>
import {useStore} from 'vuex'
import {ref, onMounted} from 'vue'
import firebase from 'firebase';
import AppMessage from "../components/ui/AppMessage";
export default {
  emits: ['created'],
  setup(_, {emit}) {
    const store = useStore()
    const picture = ref(null)
    const imageData = ref(null)
    const uploadValue = ref(0)
    const photos = ref([])
    const formData = ref()
    const status2 = ref()
    onMounted(async() => {
      status2.value = await store.dispatch('request/status')
      console.log(await store.dispatch('request/status'))
    })
    const previewImage = (event) => {
      uploadValue.value = 0;
      picture.value = null;
      photos.value.push(event.target.files[0])
      console.log(photos.value)
    }

    const submit = async() => {
      picture.value = null;
      for(let i = 0; i < photos.value.length; i++) {
        console.log('arr - all',photos.value)
        console.log('arr - all',photos.value[i].name)
        const storageRef = firebase.storage().ref(`${photos.value[i].name}`).put(photos.value[i]);
        storageRef.on(`state_changed`, snapshot => {
              uploadValue.value = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            }, error => {
              console.log(error.message)
            },
            () => {
              uploadValue.value = 100;
              storageRef.snapshot.ref.getDownloadURL().then((url) => {
                console.log(url)
                store.dispatch('request/sendPhotos', url)
              });
            }
        );
      }
      emit('created')
    }

    return {
      picture,
      imageData,
      previewImage,
      uploadValue,
      formData,
      status2,
      photos,
      submit
    }
  },
  components: {AppMessage}
}
</script>