Firebase 获取网址

什么是 Firebase？

Firebase 是一个平台，它允许您在没有服务器端编程语言的情况下构建 Web 和移动应用程序。它将用户数据存储在其实时数据库中，在用户之间实时同步数据。它是谷歌产品，为我们提供了多种功能。 Firebase 的一些主要功能包括：

• Firebase 托管
• 实时数据库
• Firebase 分析
• 云消息
• Firebase 存储
• 通知等

所有这些功能使 firebase 成为一个很好的工具，尽管 firebase 最广泛使用的功能绝对是它提供的实时数据库。 Firebase 实时数据库基本上是一个云托管的 NoSQL 数据库，可让您在用户之间实时存储和同步。数据库只是开发人员可以实时管理的一个大型 JSON 对象。实时同步使用户可以轻松地从任何设备访问他们的数据，无论是网络还是移动设备。

获取图片网址

Firebase 可用于多种用途，但主要用于实时数据库、在线处理。 Firebase 云存储是开发人员使用最多的功能。 Cloud Storage允许开发人员快速轻松地将文件上传到 Firebase 提供和管理的 Google Cloud Storage 存储分区。

图像 URL是通过将图像上传到 firebase 存储桶来获得的，然后可以返回一个 URL，该 URL 是一个可以在任何地方打开的永久 URL。然后，用户可以在其应用程序中出于任何目的使用此 URL。

在 firebase 中生成一个Bucket ，然后创建一个文件夹“images”（或任何文件夹名称），然后从 firebase 访问配置文件，这个文件在您生成数据库存储桶时生成。

配置代码如下所示：

var config = {
    apiKey: "YOUR KEY",
    authDomain: "YOUR DOMAIN",
    databaseURL: "DATA BASE URL",
    projectId: "postweb-b3f18",
    storageBucket: "BUCKET",
    messagingSenderId: "157746640407"
  };

在添加上面的配置代码之前添加下面的脚本标签

初始化您的 FireBase 云存储

firebase.initializeApp(config);

在您的 html 代码中添加一些 HTML，以便我们可以上传文件

0%


// get the file from user



// submit the chosen file
Save

解释：
上面的代码只是一个 html 表单，它可以从用户那里获取输入，即用户可以选择他想要上传的文件并点击保存按钮。当用户选择文件 ‘getfile()’函数调用和下面显示的 javascript 文件中的 ‘getfile()’函数可以运行。然后可以在javascript代码中完成进一步的调用处理并返回图像的url。

添加 javascript 以便在 html 中定义的函数可以工作：

       var selectedFile;
      function getfile()
      {
          var pic = document.getElementById("photo");
  
           // selected file is that file which user chosen by html form
          selectedFile = pic.files[0];
  
           // make save button disabled for few seconds that has id='submit_link'
          document.getElementById('submit_link').setAttribute('disabled', 'true');
          myfunction(); // call below written function
      }
      function myfunction()
      {
          // select unique name for everytime when image uploaded
          // Date.now() is function that give current timestamp
          var name="123"+Date.now();
  
          // make ref to your firebase storage and select images folder
          var storageRef = firebase.storage().ref('/images/'+ name);
  
          // put file to firebase 
          var uploadTask = storageRef.put(selectedFile);
  
          // all working for progress bar that in html
          // to indicate image uploading... report
          uploadTask.on('state_changed', function(snapshot){
            var progress = 
             (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
              var uploader = document.getElementById('uploader');
              uploader.value=progress;
              switch (snapshot.state) {
                case firebase.storage.TaskState.PAUSED:
                  console.log('Upload is paused');
                  break;
                case firebase.storage.TaskState.RUNNING:
                  console.log('Upload is running');
                  break;
              }
          }, function(error) {console.log(error);
          }, function() {
  
               // get the uploaded image url back
               uploadTask.snapshot.ref.getDownloadURL().then(
                function(downloadURL) {
  
               // You get your url from here
                console.log('File available at', downloadURL);
  
              // print the image url 
               console.log(downloadURL);
              document.getElementById('submit_link').removeAttribute('disabled');
            });
          });
      };
 

解释：
当用户提交 html 表单时，调用 getfile()函数。这个函数只是简单地获取由 html 表单选择的文件，并禁用保存按钮几秒钟，直到文件上传到 firebase，然后进一步调用另一个函数“myfunction()”。 ‘myfunction()’ 可以包含所有与 firebase 相关的实体 ‘myfunction’ 中的实体 ‘name’ 是名称图像存储在数据库中的名称。然后一些代码来运行进度条和 storageRef 以及其他所有与 firebase 相关的实体， storageRef.put(selectedFile) 将选定的文件放入数据库中。然后uploadTask.snapshot.ref.getDownloadURL() 给我们返回URL 并以html 形式保存按钮再次无法上传另一个图像。
该文件被上传到 firebase，然后返回一个需要 2-3 秒的 URL，这就是为什么我可以使用进度条并禁用提交按钮一段时间。当文件上传并生成 URL 时，只能启用提交按钮。