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

Posted 2023-02-22

【中文标题】如何按选择的顺序将多个文件上传到 Firebase 存储？

【英文标题】：How to upload multiple files to firebase storage in the order they were selected?

【发布时间】：2019-12-12 09:18:49

【问题描述】：

我一直在使用 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 上选择的顺序显示（按名称）。

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

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

【参考方案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.