javascript - 将图像文件夹上传到 Firestore 存储并将下载 URL 放入 Firestore

Question

我有大约 10,000 张图片要上传到 Firebase 存储(总计约 800 MB)。

使用 Javascript，我正在寻找一种方法:

1. 将它们上传到 Firebase 存储
2. 在上传时获取他们的 URL，并使用他们的文件名和一个名为“downloadURL”的字段或我的网站随后可以用于标记的类似名称为每个文件创建 Cloud Firestore 文档。

假设一个文件是 4670.jpg。我想上传文件，获取其持久 URL，然后创建一个名为 4670 的 Cloud Firestore 文档，其中包含一个文本字段及其持久 URL。我知道如何为单个文件执行此操作，但我要处理数千个文件。

编辑:非常感谢 Renaud Tarnec 为我提供了可行的解决方案

HTML

// File selector

<input type="file" multiple onchange="processSelectedFiles(this)">

// CDN for Firebase, Cloud Firestore, and Firebase Storage
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase-storage.js"></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "********************",
    authDomain: "********************",
    databaseURL: "********************",
    projectId: "********************",
    storageBucket: "********************",
    messagingSenderId: "********************"
  };
  firebase.initializeApp(config);


var db = firebase.firestore();

</script>

<script src="script.js"></script>

Javascript

function processSelectedFiles(fileInput) {
  var files = fileInput.files;

  var promises = []

  for (var i = 0; i < files.length; i++) {

    var file = files[i] 

      promises.push(uploadAndSavePromise(file))
  }

    Promise.all(promises);
}

function uploadAndSavePromise(file) {
     var storageRef = firebase.storage().ref();
     var fileName = file.name
     // Remove extension
     var trimmedFileName = fileName.slice(0, -4)

     var imageRef = storageRef.child('test/'+fileName);

    return imageRef.put(file).then(function(snapshot) {

        db.collection("maincollection").doc(trimmedFileName).set({
        imageURL: snapshot.downloadURL,

})

});

}

Answer 1

你说你知道如何处理一个文件。

你可能有一个基于 promises 的过程，它做了类似的事情(在伪代码中):

({Upload_to_Firebase_Storage_Promise})
.then(function(urlOfFile) {
    {create__Firestore_doc_Promise}
})
.catch(....)

您应该按照以下模式(JavaScript 和伪代码的混合)使用 Promise.all():

var promises = [];

{forEach file to upload} (
  //Create a Promise that upload the file and save the url and add this promise to the array, as follow
  promises.push(uploadAndSavePromise(fileToUpload))
)

//and call    
Promise.all(promises);

其中 uploadAndSavePromise 是一个实现初始 promise 链的函数:

function uploadAndSavePromise(file) {
    return ({Upload_to_Firebase_Storage_Promise(file)})
    .then(function(urlOfFile) {
        {create__Firestore_doc_Promise}
    });
}

现在，我要考虑的一件事是，如果您想连续上传 10000 张图片，这将如何工作...