Javascript 将图像文件夹上载到Firestore存储，并将下载URL放入Firestore

我有大约10000张图片要上传到Firebase存储（总计约800mb）

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

将它们上载到Firebase存储

上传时抓取他们的URL，并使用他们的文件名为“downloadURL”或类似的字段为每个人创建云Firestore文档，然后我的网站可以使用这些字段作为标记

假设一个文件是4670.jpg。我想上传这个文件，获取它的持久URL，然后创建一个名为4670的CloudFireStore文档，该文档有一个带有持久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>

//文件选择器
//Firebase、云Firestore和Firebase存储的CDN
//初始化Firebase
变量配置={
apiKey:“*******************”，
authDomain:“**********************”，
数据库URL:“**********************”，
项目D:“*******************”，
storageBucket:“**********************”，
messagingSenderId:“***********************”
};
firebase.initializeApp（配置）；
var db=firebase.firestore（）；

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,

})

});

}

函数处理选定文件（文件输入）{
var files=fileInput.files；
var承诺=[]
对于（var i=0；i

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

您可能有一个基于承诺的流程，其功能类似（在伪代码中）：

您应该按照以下模式使用Promise.all（）（JavaScript和伪代码的混合）：

其中uploadAndSavePromise是实现初始承诺链的函数：

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

---

现在，我要考虑的是，如果你想上传一行10000个图像，这是怎么回事？

如果你能为1个文件这样做，为什么你不能做10个或100个，或者10000？？？我假设这将涉及编写一个脚本，该脚本在目录中循环，并为目录中的每个图像执行上载/保存url到文档。@Rayfaler确实是，但由于上载和保存是异步操作，您必须处理承诺（或回调函数）。请参阅下面如何使用Promise.all完成此操作。欢迎使用stack overflow！如果您想感谢@RenaudTarnec，请在下面选择他的答案作为答案。一旦你有了足够的声誉，就投票选出有帮助的答案（除了选择它们作为答案之外）。谢谢，我会好好研究的。虽然总共有10000张图片，我可能会分200-500批来做。勒诺，非常感谢你。我在顶部发布了一个有效的解决方案（希望该问题不再保留，我找不到类似的答案，因此希望这有助于其他刚接触Firebase Storage的人！）@Rayfaler您可以单击左侧的灰色复选标记来接受答案。谢谢

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);

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