javascript - 如何按选择的顺序将多个文件上传到 Firebase 存储？

Question

我一直在使用 Firebase 存储来保存多个图像，然后将它们的 URL 存储在 Firestore 中以在前端显示图像。URL 存储在 firestore 的数组字段中。但是，当我将多个图像上传到存储时，它们不会按照它们被选择的顺序上传（顺序是它们名称的图像）。它们都同时上传，因此首先上传较小尺寸的图像，并且图像不会按照它们被选择的顺序显示。上一张图片上传后如何上传下一张图片？

我正在为我的项目使用 Vue

我已将 Files List 节点转换为一个数组，并使用 forEach 循环遍历每个单独的文件并将其存储在 firebase 存储中。

<input v-on:change.prevent='imageList' type="file" multiple name ='pImages' 
id = 'pImages'>

const pfInput = document.querySelector('#pImages').files;
const pI = Array.prototype.slice.call(pfInput);

pI.forEach((image) => {
// Storing Images in firebase cloud storage
const uploadTask = storage.ref(`projects/${this.pUsername}/${image.name}`)
                           .put(image)

uploadTask.on('state_changed', (snapshot){} , (error){} , 
()=>{
   storage.ref(`projects/${this.pUsername}`).child(image.name)
                                            .getDownloadURL()
                                            .then((url) => {
  //Code to store the URL to firestore
)
})

前端以存储 URL 的数组的索引顺序显示图像。由于文件同时上传，较短的文件首先上传，因此它们的 URL 首先被存储。因此文件不会按照在 PC 上选择的顺序显示（按名称）。

我想按照选择的顺序上传文件。

你能帮我解决这个问题吗？

标签： javascriptfirebasevue.jsfirebase-storage

Answer 1

我想出了一个解决方案。我将所有 URL 以随机顺序存储在一个数组中，并使用 .then() 对我的列表进行排序。我意识到图像的 URL 是按其名称排序的，因此当您使用数组排序时，URL 会按照文件的顺序重新排列。

之后

.then((url)=>{
//Get URL of images
this.imageList.push(url)
}) 

你可以：

.then(()=>{
 this.imageList.sort() //Sorts the list URL's in the order of the file name.
}