如何使用 Vuejs 将多个图像添加到 Firebase 实时数据库？答案

【问题标题】：How to add multiple images to Firebase realtime database using Vuejs?如何使用 Vuejs 将多个图像添加到 Firebase 实时数据库？
【发布时间】：2020-06-15 11:57:58
【问题描述】：

我正在尝试将图像上传到实时 firebase 数据库。我用一张图片做的，但我不知道如何添加多张图片。

这是我对一张图片的解决方案。

<v-layout row>
          <v-flex xs12 sm6 offset-sm3>
            <!-- accept nam govori da uzme slike i nista vise-->
            <v-btn raised @click="onPickFile">Upload image</v-btn>
            <input
              type="file"
              style="display:none"
              ref="fileInput"
              accept="image/*"
              @change="onFilePicked"/></v-flex
        ></v-layout>

在数据中我有这两个：imgURL: "", 图片：空这是一种方法：

onFilePicked(event) {
  //files is list of imaages by puting files[0] we are taking just one
  const files = event.target.files;
  let filename = files[0].name;
  if (filename.lastIndexOf(".") <= 0) {
    return alert("Please add a valid file!");
  }
  const fileReader = new FileReader();
  fileReader.addEventListener("load", () => {
    this.imgURL = fileReader.result;
  });
  fileReader.readAsDataURL(files[0]);
  this.image = files[0];
},

【问题讨论】：

标签： javascript firebase vue.js firebase-realtime-database

【解决方案1】：

虽然这不是与 firebase 相关的问题，但无论如何我都会尽力提供帮助：

首先，您应该在输入标签中添加multiple，这样您就可以在那里选择多个文件：

// CHANGE THIS:
<input type="file" style="display:none" ref="fileInput" accept="image/*" @change="onFilePicked"/>
// TO THIS:
<input type="file" style="display:none" ref="fileInput" accept="image/*" @change="onFilePicked" multiple/>

我假设您偶然发现了文件的这个奇怪的“for-loop”。我遇到了同样的问题，当我输入of 而不是in 时发现了，然后我得到了文件本身，而不仅仅是索引并且没有错误。

我拆分了你的函数的主要部分并将它们转换为 asyncron Promises（因为addEventListener 可能存在计时错误）

这只是多文件上传的想法。也许您应该添加更多的错误捕获器：

new Vue({
  data: {
    blobs: [],
    images: [],
  },
  methods: {
    async onFilePicked(event) {
      const files = event.target.files
      this.images =[]
      this.blobs =[]
      for (let file of files) {
        this.images.push(file)
        let blob = await this.prepareImagesForUpload(file)
        this.blobs.push(blob)
      }
      this.uploadImagesToFirebase()
    },
    prepareImagesForUpload(file) {
      return new Promise((resolve, reject) => {
        let filename = file.name
        if (filename.lastIndexOf(".") <= 0) {
          alert("Please add a valid file: ", filename)
          reject()
        }
        const fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.addEventListener("load", async () => {resolve(fileReader.result)})
      })
    },
    uploadImagesToFirebase() {
      //... do the firebase upload magic with:
      console.log(this.blobs)
      //...
    }
  }
})

【讨论】：