Firebase是一個網絡和移動應用程序開發平台，於2011年開發，後來由Google收購。Firebase為開發人員提供了廣泛的服務和工具，當然也包括其中一些是免費的。它提供了存儲設備和數據庫功能，減少了對服務器端的依賴，並消除了將文件處理降到最低限度的問題。此教學將幫助您設置帳戶，然後使用API將文件上傳到Firebase存儲。

設置Google Firebase

1. 設置Firebase帳戶。如果您尚未創建Firebase帳戶，請創建一個Firebase帳戶。轉到控制台並添加一個新項目。填寫一個好名字並創建一個項目。

   

2. 將Firebase添加到您的網絡應用程序。或者，您可以將Firebase添加到Android應用/ iOS應用。如果您使用的是一個javaScript框架來構建您的應用程序，那麼這些步驟應該非常相似。將配置數據複製到您的HTML代碼中，然後您可以使用AJAX將數據推送到您的Firebase存儲。

   

3. 選擇存儲選項。借助Firebase，您可以定義有關如何存儲文件以及設置訪問控制的規則。這些文件存儲在Google雲端存儲中。

   

   • 或者，您可以將對文件的引用存儲在Firebase中，然後使用其他雲存儲基礎架構來實際存儲文件。例如，您可以將Firebase與Amazon S3進行文件存儲或Cloudinary存儲javascript圖像。

創建文件上傳的前端

1. 建立環境。大多數主要的前端JavaScript庫（如React，Angular和Vue）都有流行的庫，可將它們與Firebase集成。如果你的前端庫有一個Firebase模塊，比如AngularFire for Angular，你應該考慮使用它。在本文中，我們將編寫一個AJAX文件上傳器腳本來將文件推送到Firebase存儲。

2. 在您的網絡應用程序中創建Firebase存儲參考。如果您需要訪問Firebase存儲，這一點很重要。

   const ref = firebase.storage().ref();
   

3. 創建一個輸入字段。完成後，從輸入[type ="file"]訪問要上傳的文件。如果您使用jQuery，代碼將如下所示。

   const file = $('#photo').get(0).files[0];

4. 準備文件。在上傳文件之前，您需要準備文件名以及您上傳文件的元數據。不建議將文件名稱作為唯一標識符。時間戳是可以附加到文件名稱的字段：

   const name = (+new Date()) + '-' + file.name;

5. 創建一個上傳任務。為了生成文件的上傳任務，您可以使用.put()方法完成此任務。從本質上講，這項任務是一個承諾，因此可以稍後輕鬆地進行操作。這裡的命令是

   const task = ref.child(name).put(file, metadata);

   文件上傳任務還支持許多不同的方法，包括task.resume()，task.cancel()和task.pause()。

6. 從URL中檢索響應。收到回复時，您可以使用Promise來解決問題。

   task.then((snapshot) => {<br/>
       console.log(snapshot.downloadURL); <br/>});

7. 捕捉錯誤。可能會遇到需要一些故障排除的錯誤情況。這可以通過使用.catch()方法在上傳任務中處理，如下所示：

   task
       .then((snapshot) => {
         document.querySelector('#someImageTagID').src = snapshot.downloadURL;
       })
       .catch((error) => {
         // A list of errors can be found at
         // https://firebase.google.com/docs/storage/web/handle-errors
         switch (error.code) {
           case 'storage/unauthorized':
             // User doesn't have permission to access the object
             break;
           case 'storage/canceled':
             // User canceled the upload
             break;
           ...
           case 'storage/unknown':
             // Unknown error occurred
             break;
         }
   })  

分享來源:How to Upload Files to Firebase Storage Using JavaScript