Firebase是一個網絡和移動應用程序開發平台,於2011年開發,後來由Google收購。Firebase為開發人員提供了廣泛的服務和工具,當然也包括其中一些是免費的。它提供了存儲設備和數據庫功能,減少了對服務器端的依賴,並消除了將文件處理降到最低限度的問題。此教學將幫助您設置帳戶,然後使用API將文件上傳到Firebase存儲。
設置Google Firebase
-
設置Firebase帳戶。如果您尚未創建Firebase帳戶,請創建一個Firebase帳戶。轉到控制台並添加一個新項目。填寫一個好名字並創建一個項目。
-
將Firebase添加到您的網絡應用程序。或者,您可以將Firebase添加到Android應用/ iOS應用。如果您使用的是一個javaScript框架來構建您的應用程序,那麼這些步驟應該非常相似。將配置數據複製到您的HTML代碼中,然後您可以使用AJAX將數據推送到您的Firebase存儲。
-
選擇存儲選項。借助Firebase,您可以定義有關如何存儲文件以及設置訪問控制的規則。這些文件存儲在Google雲端存儲中。
- 或者,您可以將對文件的引用存儲在Firebase中,然後使用其他雲存儲基礎架構來實際存儲文件。例如,您可以將Firebase與Amazon S3進行文件存儲或Cloudinary存儲javascript圖像。
創建文件上傳的前端
-
建立環境。大多數主要的前端JavaScript庫(如React,Angular和Vue)都有流行的庫,可將它們與Firebase集成。如果你的前端庫有一個Firebase模塊,比如AngularFire for Angular,你應該考慮使用它。在本文中,我們將編寫一個AJAX文件上傳器腳本來將文件推送到Firebase存儲。
-
在您的網絡應用程序中創建Firebase存儲參考。如果您需要訪問Firebase存儲,這一點很重要。
const ref = firebase.storage().ref();
-
創建一個輸入字段。完成後,從輸入[type ="file"]訪問要上傳的文件。如果您使用jQuery,代碼將如下所示。
const file = $('#photo').get(0).files[0];
-
準備文件。在上傳文件之前,您需要準備文件名以及您上傳文件的元數據。不建議將文件名稱作為唯一標識符。時間戳是可以附加到文件名稱的字段:
const name = (+new Date()) + '-' + file.name;
-
創建一個上傳任務。為了生成文件的上傳任務,您可以使用.put()方法完成此任務。從本質上講,這項任務是一個承諾,因此可以稍後輕鬆地進行操作。這裡的命令是
const task = ref.child(name).put(file, metadata);
文件上傳任務還支持許多不同的方法,包括task.resume(),task.cancel()和task.pause()。
-
從URL中檢索響應。收到回复時,您可以使用Promise來解決問題。
task.then((snapshot) => {<br/> console.log(snapshot.downloadURL); <br/>});
-
捕捉錯誤。可能會遇到需要一些故障排除的錯誤情況。這可以通過使用.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