Question

我正在尝试将图像上传到实时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：“”，图片：null 这是一种方法：

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];
},

Answer 1

尽管这不是与Firebase相关的问题，但无论如何我还是要帮助：

首先，您应该在输入标签中添加ENV PROJ_DIR=/myproj/ ENV PYTHONPATH=${PROJ_DIR}:${PYTHONPATH}，以便在那里可以选择多个文件：

multiple

我认为您偶然发现了文件中的这个奇怪的“ for-loop”。我遇到了同样的问题，并且弄清楚了当我键入// 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/>而不是of时，才得到文件本身，不仅是索引，而且没有错误。

我拆分了函数的主要部分，并在异步in中进行了转换（因为Promises可能存在计时错误）

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

addEventListener

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

1 个答案: