极客笔记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，在示例中我们将使用该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，并将图像的’src’属性值更改为URL。
用户应按照以下步骤执行给定的示例。
- 步骤1 - 在
<head>标签中添加Firebase CDN以在单页网站中使用Firebase。 -
步骤2 - 在HTML中，添加一个进度条，根据JavaScript中的图像上传百分比更新进度。还要添加一个用于上传文件的输入框，当用户上传文件时，它应该调用uplaodFile()函数。此外，添加一个’img’元素，其’src’值为空，我们将在获取下载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>Uploading image to <i>Firebase and getting URL.</i></h2>
<h3>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。