資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用HTML和JavaScript在Firebase中上傳圖片？
在本教程中，您將學習如何在使用HTML和JavaScript的Firebase中上傳圖片的步驟。
Firebase − Firebase是一個基於雲的儲存平臺，它是谷歌的產品，提供用於各種Web和移動應用程式開發的儲存服務。它提供NoSQL和即時資料庫託管、身份驗證、通知、內容等等服務。
使用HTML和JavaScript在Firebase中上傳圖片的步驟
要將Firebase連線到專案，您應該在此處建立一個Firebase專案，以下是建立和啟用儲存服務以將圖片上傳到Firebase儲存的逐步過程。
步驟1 − 訪問Firebase網站，點選“開始使用”按鈕，要建立新專案，點選“建立專案/新增專案”按鈕。
步驟2 − 新增您的專案名稱並按繼續。
步驟3 − 點選繼續。
步驟4 − 選擇分析位置選項，然後點選“建立專案”按鈕。
步驟5 − 點選繼續，然後點選圖片下方顯示的第三個圖示，即Web按鈕</>，因為我們將從網站上傳圖片，所以我們需要相關的配置。
步驟6 − 給您的應用命名，然後點選註冊應用。
步驟7 − 儲存程式碼，您將在程式碼部分稍後使用它，然後點選繼續到控制檯。
步驟8 − 從左側窗格中，展開構建並點選即時資料庫。
步驟9 − 點選建立資料庫。選擇即時資料庫位置並點選下一步。
步驟10 − 選擇測試模式並點選啟用按鈕。
步驟11 − 從左側窗格中，展開構建並點選儲存。
步驟12 − 點選開始使用。再次，將開啟一個彈出視窗，選擇測試模式，然後點選下一步，點選完成。
程式碼部分
注意 − 新增我們在步驟7中已儲存的值apiKey、authDomain等。
const firebaseConfig = {
apiKey: "***",
authDomain: "**",
projectId: "**",
storageBucket: "**",
messagingSenderId: "**",
appId: "**",
measurementId: "**"
};
我們將建立一個非常簡單的前端部分，有兩個按鈕：第一個是檔案選擇按鈕，第二個是上傳按鈕。檔案選擇按鈕將從您的系統中選擇所選檔案，點選上傳按鈕將觸發上傳功能，並將圖片上傳到Firebase儲存。
示例
<!DOCTYPE html>
<html>
<head>
<title>Firebase Image Upload using HTML and JavaScript</title>
<style>
#photo{
margin-top: 200px;
margin-left: 450px;
}
#upload{
margin-top: 20px;
margin-left: 450px;
}
</style>
</head>
<body>
<input type="file" id="photo" /></br>
<button id="upload" onclick="uploadImage()">Upload Image</button>
</body>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-storage.js"></script>
<script>
//paste here your copied configuration code
const firebaseConfig = {
apiKey: "***",
authDomain: "**",
projectId: "**",
storageBucket: "**",
messagingSenderId: "**",
appId: "**",
measurementId: "**"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebase);
function uploadImage() {
const ref = firebase.storage().ref();
const file = document.querySelector("#photo").files[0];
const name = +new Date() + "-" + file.name;
const metadata = {
contentType: file.type
};
const task = ref.child(name).put(file, metadata);task
.then(snapshot => snapshot.ref.getDownloadURL())
.then(url => {
console.log(url);
alert('image uploaded successfully');
document.querySelector("#image").src = url;
})
.catch(console.error);
}
const errorMsgElement = document.querySelector('span#errorMsg');
</script>
</html>
上傳圖片後，轉到Firebase頁面並點選“檔案”以重新整理。這是我們上傳到Firebase的圖片。
Firebase有不同的圖片上傳功能。因此，首先獲取儲存桶並使用日期函式生成隨機名稱，然後使用put方法上傳畫素影像。我們將使用影像源和一個常量（即URL）。此put方法返回一個promise，我們使用.then處理響應。它還返回一個回撥函式，該函式返回一個snapshot變數，我們將在其中通知使用者圖片已成功上傳。
6000+ 次瀏覽
