数据结构
网络
关系数据库管理系统(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+ 次浏览
