如何使用 Vuejs 将多张图片添加到 Firebase 实时数据库?

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："， 图像：空 这是一种方法：

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

虽然这不是一个与火力相关的问题，但我还是会尽力提供帮助：

首先，您应该在输入标签中添加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时，我得到了文件本身，而不仅仅是索引，没有错误。

我拆分了函数的主要部分并在异步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)
//...
}
}
})