Firebase 存储上传 csv 文件答案

【问题标题】：Firebase Storage uploading csv fileFirebase 存储上传 csv 文件
【发布时间】：2018-10-13 04:04:29
【问题描述】：

我通过 Firebase 创建了一个 WebApp 来将文件上传到云存储，但是当我选择要上传的文件时，没有任何操作，选择文件操作不会上传文件。

我已经检查了以下内容：

存储规则：它们是开放的
浏览器设置：所有浏览器都存在相同问题。

下面是我的 index.html 文件，希望任何人都可以对这个奇怪的问题有所了解？

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Test Upload App</title>
  <style media="screen">
    body {
      display: flex;
      min-height: 100vh;
      width: 100%;
      padding: 0;
      margin: 0;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    
    #uploader {
      -webkit-appearance: none;
      appearance: none;
      width: 50%;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>

  <progress value="0" max="100" id="uploader">0%</progress>
  <input type="file" value="upload" id="fileButton" />

  <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "AIzaSyCA7XWfS7deQaYGgaUaTWK-xxxxxxxxxxxx",
      authDomain: "testapp.firebaseapp.com",
      databaseURL: "https://test-project.firebaseio.com",
      projectId: "testproject",
      storageBucket: "testbucket_inbound/mydata/",
    };
    firebase.initializeApp(config);

    //Get Elements
    var uploader = document.getElementById('uploader');
    var fileButton = document.getElementById('fileButton');

    //Listen for file selection
    fileButton.addEventListener('change', function(e) {
      // Get file
      var file = e.target.files[0];

      // Create storage ref
      var storageRef = firebase.storage().ref('mydata/' + file.name);

      // upload file
      var task = storageRef.put(file);

      // update progress bar
      task.on('state_changed',

        function progress(snapshot) {
          var percentage = (snapshot.bytesTransferred /
            snapshot.totalBytes) * 100;
          uploader.value = percentage;
        },

        function error(err) {

        },

        function complete() {

        }

      );
    });
  </script>
</body>

</html>

【问题讨论】：

仅供参考，我已经测试了您的代码，它运行良好。请注意，我已经尝试过，对于 Cloud Storage，您可能需要等待几秒钟才能应用安全规则的更改
没有这样的“部署”：我只是将您的代码复制粘贴到本地 HTML 页面中，并使用我的一个测试项目的值修改了 config 对象，然后我打开了浏览器页面并尝试：上传的文件已正确保存到 Firebase 存储。
好的，谢谢，这是我遇到的问题：gymwin-199801.firebaseapp.com
您的过程似乎没问题。我所尝试的只是存储在我的硬盘上的一个 HTML 页面。您不一定需要将页面部署到 Firebase 的托管服务才能“运行”它。但是如果你部署它，它的行为应该是一样的。

标签： firebase google-cloud-firestore firebase-storage

【解决方案1】：

你部署的页面有错误：

你在 HTML 中声明你的按钮如下

<input type="file" value="upload" id="filebutton" />

但是您将 EventListener 设置在一个 id 为大写 B 的按钮上

fileButton.addEventListener('change' , function(e) {

改成

filebutton.addEventListener('change' , function(e) {

它应该可以工作。

您可以从浏览器控制台看到错误：ReferenceError: fileButton is not defined

最后请注意，在您问题的代码中它是正确的！你在这两个地方使用fileButton。

【讨论】：

太棒了！我错过了，谢谢。现在工作！，非常感谢