javascript - 无法将图像上传到 Firebase 存储

标签 javascript html firebase polymer firebase-storage

首先,我使用 Polymer cli 初始化了一个 Polymer app-drawer-template,然后将 Firebase 存储添加到了 Web 应用中。然后我将文件上传代码添加到其中一个页面(该页面的代码如下)。但是我收到以下错误(这会阻止文件上传,也不会更新进度条),

Uncaught TypeError: Cannot read property 'addEventListener' of null

还有

Uncaught TypeError: Cannot read property 'instanceCount' of undefined

这是我的代码。

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="my-market">

  <template>

    <style>
      :host {
        display: block;
        padding: 10px;
      }
      paper-card.top{
        margin-top: 8px;
        width: 100%;
        padding-bottom: 16px;
      }
    </style>

    <paper-card heading="Welcome to the Market!">
      <div class="card-content">
        <h4>Upload a photo of your item</h4>
        <!--uplod image-->
        <input type="file" value="upload" id="fileUpload"/>
        <progress value="0" max="100" id="uploader">0%</progress>
      </div>
    </paper-card>

  </template>

  <script>

   //File upload script to Firebase storage
  var uploader = document.getElementById('uploader');
  var fileButton = document.getElementById('fileUpload');

  //File selection listener
  fileButton.addEventListener('change', function(a) {

    //Get image
    var file = a.target.files[0];

    //create a storage reference
    var storageRef = firebase.storage().ref('images/' + file.name);

    //store the image
    var task = storageRef.put(file);

    //notify the user of upload status
    task.on('state_changed',

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

        function error(err) {

        },

        function complete() {

        }

    );

  });

  </script>


  <script>

    Polymer({

      is: 'my-market'

    });

  </script>

</dom-module>

我还尝试将 Firebase 存储的代码放置在 index.html 文件的标记中,但它仍然无法正常工作。有什么建议吗?

最佳答案

这就是修复。

只需将脚本放入 Polymer({}) 中即可;功能。

Polymer({

  is: 'my-market',

  upld: function(a) {
      //Get image
     var file = a.target.files[0];

     //create a storage reference
     var storageRef = firebase.storage().ref('images/' + file.name);

     //store the image
     var task = storageRef.put(file);

 }

});

并将文件输入的 on-change 属性指定为“upld”。

关于javascript - 无法将图像上传到 Firebase 存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38558725/

相关文章:

javascript - 在 typescript 中的 BinTree 上进行预购旅行

Javascript 创建一个 li 并附加到一个 ol

javascript - 我从头开始创建 html 解析器的想法可行吗?

javascript - navigator.onLine 的 Internet 连接状态无法正常工作,并且在未连接 Internet 时显示错误状态

firebase - 批量写入 Firestore 的最大大小是多少(以 MB 为单位)

javascript - 多个日期条目

javascript - 如果浏览器关闭,则执行所有 ajax 请求

javascript - 嵌套 .then 并且我无法将 res.send 发送回浏览器

html - 一个 div 与另一个重叠,屏幕尺寸减小

java - 检索多个子分支 Firebase