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

設置Google Firebase

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

    Firebase

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

    Firebase

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

    Firebase

    • 或者,您可以將對文件的引用存儲在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

您也可能喜歡這些文章

Copyright © 2018 ucamc