How to create gallery page with vue and firebase

Hello guys. I am working on a project and this project includes a gallery page. I can upload an image to firestorage but I want to upload and receive multi images. These images will be in a gallery. How can I do that? Do you have any suggestions or alternative ways?

template section :

    <div class="row mt-2">
      <div class="col-lg-12">
        <div class="mb-3">
          <input
            class="form-control"
            type="file"
            id="formFileMultiple"
            ref="galleryImage"
            multiple
            @change="fileChange"
          />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 projectImg">
        <div class="d-flex">
          <div
            class="card m-2 img-wrapp"
            
          >
            <img :src="this.galleryPhotoURL" />
           
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 mt-4">
        <button class="form-control" @click.prevent="submitForm">Yükle</button>
      </div>
    </div>

script section :

								import firebase from "firebase/app";
								import "firebase/storage";
									import { db } from "@/main";
									import NavBarRoute from "@/components/NavBarRoute.vue";
									export default {
									name: "AddProject",
									components: {
									  NavBarRoute,
									 },
									 data() {
									 return {
										  file : null,
									 };
									},
									computed : {
									 galleryTitle : {
 										 get(){
 										   return this.$store.state.galleryTitle
  										},
  										set(payload) {
   										 this.$store.commit("updateGalleryTitle", payload);
  										},
										},
										gallerySubject : {
  										get(){
   										 return this.$store.state.gallerySubject
  										},
  										set(payload) {
   										 this.$store.commit("updateGallerySubject", payload);
  										},
										},
										galleryPhotoName(){
    return this.$store.state.galleryPhotoName
										},
										galleryPhotoURL(){
    										return this.$store.state.galleryPhotoURL
										}
									 },
									 methods: {
										fileChange() {
  											this.file = this.$refs.galleryImage.files[0];
											  const fileName = this.file.name;
 											 this.$store.commit("fileNameChange", fileName);
											  this.$store.commit("createFileURL", URL.createObjectURL(this.file));
										},
											submitForm() {
											  if(this.file){
   											 const storageRef = firebase.storage().ref()
    											const docRef = 																						storageRef.child(`ProjectGallery/${this.$store.state.galleryPhotoName}`);
 											   docRef.put(this.file).on('state_chaged', (snapshot) => {
    											  console.log(snapshot)
   											 }, 
   											 (err) => {
    											  console.log(err)
    											},
      											async () => {
     											   const downloadURL = await docRef.getDownloadURL();
        											const dataBase = await db.collection("galleryContent").doc();
        											await dataBase.set({
        											  contentID : dataBase.id,
        											  galleryTitle : this.galleryTitle,
        											  gallerySubject : this.gallerySubject,
        											  galleryPhotoURL : downloadURL,
        											 galleryPhotoName : this.galleryPhotoName,
        											});
        											await this.$store.dispatch("getContent")
        											this.$router.push("/");
        											/* this.$router.push({name : "Project", params : {contentid : dataBase.id}}); */
    											  }
  											  )
  											}
										 },
										 },
										};

store/index.js :

	 									state: {
										galleryContent: [],
										 galleryLoaded: null,
										 galleryTitle: "",
										 gallerySubject: "",
										 galleryPhotoName: '',
										  galleryPhotoURL: null,
										}				

										mutations: {
											setContentstate(state, payload) {
											  state.galleryTitle = payload.galleryTitle
											  state.gallerySubject = payload.gallerySubject
											  state.galleryPhotoURL = payload.galleryPhotoURL
 											 state.galleryPhotoName = payload.galleryPhotoName
										 },
										fileNameChange(state, payload) {
  											state.galleryPhotoName = payload
											},
										 createFileURL(state, payload) {
											  state.galleryPhotoURL = payload
										  },
										}
   actions: {
    async getContent({
   state
   }) {
   const dataBase = await db.collection('galleryContent')
   const dbResults = await dataBase.get()
   dbResults.forEach((doc) => {
     if (!state.galleryContent.some(post => post.contentID === doc.id)) {
       const data = {
         contentID: doc.data().contentID,
         galleryTitle: doc.data().galleryTitle,
         gallerySubject: doc.data().gallerySubject,
         galleryPhotoURL: doc.data().galleryPhotoURL,
         galleryPhotoName: doc.data().galleryPhotoName,
       }
       state.galleryContent.push(data)
     }
   })
   state.galleryLoaded = true
 },
}