如何在 firebase 中使用 HTML 和 JavaScript 上传图片？

Firebase是 Google 的一款产品，可帮助开发人员轻松构建、管理和扩展他们的应用程序。它可以帮助开发人员更快、更安全地构建他们的应用程序。 firebase 端不需要编程，这使得更容易更有效地使用其功能。它提供云存储。它使用 NoSQL 来存储数据。

在这里，我们将学习如何在 firebase 中使用 HTML 和 JavaScript 上传图像。在使用数据库时，我们可能还需要上传图像文件。

分步实施

第 1 步：如果您是 firebase 新手，请参阅此内容。

激活 Firebase 存储：

单击左侧的存储按钮，然后单击开始。

之后会弹出这个框。单击下一步。

然后点击完成。

第 2 步：在这里，我们将编写 Html 和 JavaScript 代码以将 Html 代码与 Firebase 数据库连接起来。

HTML

 

    
    Collecting Data
    
 

 

 
    
              Hey There,Here we are going to upload
    
    
        
            
 
                Select Type
    
      1
    
  
 

    Document Upload:
    
    
    
    
       
           
               Upload Image
            
           
  

 

                Submit
  
 






 

 


 

  
 
  
 // adding firebase data
   var firebaseConfig = {
    apiKey: "*********************- ",
    authDomain: "-********************* ",
    databaseURL: "********************* ",
    projectId: "********************* ",
    storageBucket: "********************* ",
    messagingSenderId: "********************* ",
    appId: "********************* "
  };
  firebase.initializeApp(firebaseConfig);
  var messagesRef = firebase.database().ref('Checking');
  document.getElementById(
     'contactForm').addEventListener('submit', submitForm);
 //uploading file in storage
  function uploadimage(){
     var type = getInputVal('types');
  var storage = firebase.storage();
  var file=document.getElementById("files ").files[0];
  var storageref=storage.ref();
  var thisref=storageref.child(type).child(file.name).put(file);
  thisref.on('state_changed',function(snapshot) {
 
 
  }, function(error) {
  
 }, function() {
  // Uploaded completed successfully, now we can get the download URL
  thisref.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    //getting url of image
    document.getElementById("url ").value=downloadURL;
    alert('uploaded successfully');
    saveMessage(downloadURL);
   });
  });
 
  // Get values
  var url = getInputVal('url');
  // Save message
  // saveMessage(url);
}
function getInputVal(id){
    document.getElementById('contactForm').reset();
 
}
 
 
// Function to get get form values
function getInputVal(id){
  return document.getElementById(id).value;
}
 
// Save message to firebase database
function saveMessage(url){
  var newMessageRef = messagesRef.push();
  newMessageRef.set({
   imageurl:url,
  });
}

编写代码后，您可以在终端中使用以下命令运行它

python manage.py runserver 

在这里，我们将在任何网络浏览器上运行它后看到以下屏幕。

使用选择文件按钮选择图像后，我们可以选择任何文件，然后我们将单击上传图像按钮将图像上传到 firebase

在实时数据库中，我们可以看到图片上传成功。