Wie lade ich mehrere Dateien auf Firebase hoch?

Question

Gibt es eine Möglichkeit, mehrere Dateien auf Firebase-Speicher hochzuladen. Es kann einzelne Datei innerhalb eines einzelnen Versuchs wie folgt hochladen.

fileButton.addEventListener('change', function(e){ 
//Get file 
var file = e.target.files[0]; 

//Create storage reference 
var storageRef = firebase.storage().ref(DirectryPath+"/"+file.name); 

//Upload file 
var task = storageRef.put(file); 

//Update progress bar 
    task.on('state_changed', 
    function progress(snapshot){ 

     var percentage = snapshot.bytesTransferred/snapshot.totalBytes * 100; 
     uploader.value = percentage; 
    }, 
    function error(err){ 

    }, 
    function complete(){ 
     var downloadURL = task.snapshot.downloadURL; 

    } 
); 

}); 

Wie kann man mehrere Dateien auf die Speicherfirebase laden.

Answer 1

Ich fand die Lösung für meine obige Frage und ich möchte es hier setzen, weil es für jeden nützlich sein kann.

//Listen for file selection 
fileButton.addEventListener('change', function(e){ 
    //Get files 
    for (var i = 0; i < e.target.files.length; i++) { 
     var imageFile = e.target.files[i]; 

     uploadImageAsPromise(imageFile); 
    } 
}); 

//Handle waiting to upload each file using promise 
function uploadImageAsPromise (imageFile) { 
    return new Promise(function (resolve, reject) { 
     var storageRef = firebase.storage().ref(fullDirectory+"/"+imageFile.name); 

     //Upload file 
     var task = storageRef.put(imageFile); 

     //Update progress bar 
     task.on('state_changed', 
      function progress(snapshot){ 
       var percentage = snapshot.bytesTransferred/snapshot.totalBytes * 100; 
       uploader.value = percentage; 
      }, 
      function error(err){ 

      }, 
      function complete(){ 
       var downloadURL = task.snapshot.downloadURL; 
      } 
     ); 
    }); 
} 

Answer 2

Ich glaube, es gibt eine einfachere Lösung:

// set it up 
firebase.storage().ref().constructor.prototype.putFiles = function(files) { 
    var ref = this; 
    return Promise.all(files.map(function(file) { 
    return ref.child(file.name).put(file); 
    })); 
} 

// use it! 
firebase.storage().ref().putFiles(files).then(function(metadatas) { 
    // Get an array of file metadata 
}).catch(function(error) { 
    // If any task fails, handle this 
}); 

Answer 3

Firebase Speicher verwendet Versprechen, so dass Sie Versprechen, es zu erreichen nutzen können.

Hier ist der Feuerbasis Blog-Artikel, der dieses Thema behandelt: Keeping our Promises (and Callbacks)

---

Geben Promise.all() ein "Array of Promises"

Promise.all(
    // Array of "Promises" 
    myItems.map(item => putStorageItem(item)) 
) 
.then((url) => { 
    console.log(`All success`) 
}) 
.catch((error) => { 
    console.log(`Some failed: `, error.message) 
}); 

hochladen jede Datei und geben ein Versprechen

putStorageItem(item) { 
    // the return value will be a Promise 
    return firebase.storage().ref("YourPath").put("YourFile") 
    .then((snapshot) => { 
    console.log('One success:', item) 
    }).catch((error) => { 
    console.log('One failed:', item, error.message) 
    }); 
} 

YourPath und YourFile kann mit myItems Array (also das item Objekt) durchgeführt werden.

Ich habe sie hier nur für die Lesbarkeit weggelassen, aber Sie bekommen das Konzept.