【问题标题】:Cannot upload images to Firebase Storage无法将图片上传到 Firebase 存储
【发布时间】:2016-11-28 06:18:25
【问题描述】:

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

未捕获的类型错误:无法读取 null 的属性“addEventListener”

还有

未捕获的类型错误:无法读取未定义的属性“instanceCount”

这是我的代码。

<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 文件的标记中,但它仍然无法正常工作。有什么建议吗?

【问题讨论】:

    标签: javascript html firebase polymer firebase-storage


    【解决方案1】:

    这是解决办法。

    只需将您的脚本放入 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”。

    【讨论】:

    • 是的...任何想法为什么?
    • 我只是看看这个模板的文档,看起来你应该按照它的规则委托你的自定义事件,在 js-object 中定义你的事件给 Polymer({..here.. .});查看其官方文档polymer-project.org/1.0/docs/devguide/events 并注意“自定义事件”部分
    • 或者只是快速尝试一下,将您的 移出 标签,在链接的“事件重定向”上方部分有类似这种行为的示例代码
    • 感谢帮助,刚刚看了下文档,解决了。
    猜你喜欢
    • 2020-07-02
    • 2021-08-18
    • 1970-01-01
    • 1970-01-01
    • 2017-09-21
    • 2018-06-14
    • 2016-12-24
    相关资源
    最近更新 更多