Firebase取得url
Firebase 是一種提供不同服務的後端即服務 (BAAS)。服務包括認證、雲端儲存、吊掛等。基本上，它使開發人員可以輕鬆地將身份驗證、資料庫等整合到行動或 Web 應用程式中。
在本教學中，我們將探索 Firebase 的雲端儲存。我們將學習在 Firebase 雲端儲存中上傳圖像並獲取圖像的 URL，以便我們可以在任何地方使用。
使用者應按照以下步驟設定 Firebase 帳戶並將其與單頁 Web 應用程式整合。
第 1 步 - 首先，造訪 Firebase 網站並建立帳戶。
第 2 步 - 現在，前往 https://console.firebase.google.com/u/0/ 開啟 Firebase 控制台。
第 3 步 - 現在，點擊「建立專案」按鈕開始建立新專案。
第 4 步 - 在此新增項目名稱，接受條款和條件，然後按一下「繼續」按鈕。
第 5 步 - 選擇首選位置，接受條款和條件，然後按一下「建立項目」按鈕。
第 6 步 - 它會將您重定向到以下頁面。在這裡，按一下“儲存”卡元素。之後，按一下“開始”按鈕。
第 7 步 - 在這裡，選擇以「測試」或「生產」模式啟動。在這裡，我們將選擇“測試”模式進行測試，然後按一下“下一步”按鈕。
第 8 步 - 現在，選擇離您最近的首選儲存位置，然後按一下「完成」按鈕。它將開始創建預設儲存桶。
步驟 9 - 建立儲存桶會將您重新導向至下列頁面。從這裡複製我們將在範例中使用的儲存桶 ID。
第 10 步 - 現在，轉到「規則」標籤並編輯規則。之後，添加以下程式碼，允許所有使用者無需身份驗證即可上傳圖片檔案。
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
// Allow access by all users
allow read, write;
}
}
}
我們現在已完成 Firebase 專案設置，以上傳儲存桶中的映像。
範例
下面的範例在使用者上傳任何映像檔時呼叫 uploadFile() 函數。在 uploadFile() 函數中，我們將圖像檔案上傳到 Firebase 存儲，獲取圖像 URL，並使用該 URL 更改圖像的「src」屬性值。
使用者應按照給定範例執行以下步驟。
第 1 步 - 在
標記中新增 Firebase CDN，以在單頁網站中使用 Firebase。步驟 2 - 在 HTML 中，新增一個進度條，我們將根據圖片上傳百分比從 JavaScript 更新其進度。另外，添加輸入以上傳文件，這應該在用戶上傳文件時調用 uplaodFile() 函數。此外，新增帶有空白「src」值的「img」元素，我們將在取得下載 URL 後初始化「src」值。
第 3 步 - 在 JavaScript 中，當使用者上傳檔案時存取它，並使用 Date() 物件將唯一的檔案名稱儲存到「fileName」變數中。
第 4 步 - 現在，初始化 Firebase 儲存。
第5步 - 現在開始將圖像檔案上傳到儲存桶中的首選位置，並根據上傳的百分比上傳進度值。
第 6 步 - 上傳完成後，使用 getDownalodURL() 方法取得圖片 URL 並將其設定為要顯示的圖片的「src」屬性值網頁。
在輸出中，使用者可以觀察到它顯示了上傳的圖像。
<html>
<head>
<!-- Include Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-storage.js"></script>
<style>
img {
width: 500px;
height: auto;
}
</style>
</head>
<body>
<h2 id="Uploading-image-to-i-Firebase-and-getting-URL-i">Uploading image to <i>Firebase and getting URL.</i></h2>
<h3 id="Upload-image-file-below">Upload image file below.</h3>
<form>
<!-- Showing image uploading progress bar -->
<progress value = "0" id = "progressBar" max = "100"> 0% </progress> <br> <br>
<!-- file input -->
<input id = "file" type = "file" onchange = "uploadFile()"> <br> <br>
<!-- Showing uploaded image -->
<img src = "" alt = "" id = "uploadedImage">
</form>
<script>
// Firebase configurations
var config = {
apiKey: "AIzaSyBsYILuhF4wOGOe0rFhPudhVWO3cGh2z18",
authDomain: "localhost",
projectId: "test-application-45005",
storageBucket: "gs://test-application-45005.appspot.com",
};
// Initialize the Firebase app
firebase.initializeApp(config);
var currentFile;
function uploadFile() {
var fileInput = document.getElementById("file");
// select the uploaded file
currentFile = fileInput.files[0];
// give a unique name to the file
var fileName = "image-" + Date.now();
// Give reference to the bucket path where we require to store the uploaded image
var storageRef = firebase.storage().ref('/images/' + fileName);
// upload file to selected storage reference
var uploadingElement = storageRef.put(currentFile);
// When uploading of the image starts, change the value of the progress bar
uploadingElement.on('state_changed', (uploadingImage) => {
var progress =
(uploadingImage.bytesTransferred / uploadingImage.totalBytes) * 100;
var progressBar = document.getElementById('progressBar');
progressBar.value = progress;
}, function (error) {
console.log(error);
}, function () {
// Get the image URL
uploadingElement.snapshot.ref.getDownloadURL().then(
function (imageURL) {
// set image URL as a value of the 'src' attribute of the image element
let img = document.getElementById('uploadedImage');
img.src = imageURL;
});
});
}
</script>
</body>
</html>
用戶學會了使用 JavaScript 將圖像上傳到 Firebase 雲端儲存並獲取圖像 URL。在即時應用中，使用 Firebase 時，獲取用戶個人資料照片和其他圖像的上傳圖像的 URL 非常有用。
此外，Firebase 還允許開發者進行非常快速的設定來上傳圖像並獲取其 URL。
以上是Firebase取得url的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
JavaScript難以學習嗎？
Apr 03, 2025 am 12:20 AM
學習JavaScript不難，但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程，通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤，使用調試技巧。 5)優化性能，遵循最佳實踐。
如何實現視差滾動和元素動畫效果，像資生堂官網那樣？
或者：
怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？
Apr 04, 2025 pm 05:36 PM
實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
console.log輸出結果差異：兩次調用為何不同？
Apr 04, 2025 pm 05:12 PM
深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...
