使用纸张输入选择的访问文件

Ras*_*pel 5 javascript web-component polymer

我正在尝试上传通过Polymer <paper-input type="file" id="filepicker">元素选择的文件但是当我尝试访问该文件时:

var file = this.$.filepicker.files
Run Code Online (Sandbox Code Playgroud)

我收到一个files is not defined错误.

我还没有找到任何其他方法来访问纸张输入中的文件,所以我不确定这里的问题是什么.

任何帮助,将不胜感激!

ton*_*y19 6

files属性位于您可以访问的内部<input>元素上.所以你会用这个:<paper-input><paper-input>.inputElement.inputElement

this.$.filepicker.inputElement.inputElement.files[0];
Run Code Online (Sandbox Code Playgroud)

注意:在早期版本中<paper-input>,内部<input>被访问过this.$.filepicker.inputElement,但它已经被重构为拥有另一个容器(因此this.$.filepicker.inputElement.inputElement).

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _handleFiles: function() {
      console.log(this.$.input.inputElement.inputElement.files[0]);
    }
  });
});
Run Code Online (Sandbox Code Playgroud)
<head>
  <base href="https://polygit.org/polymer+1.10.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <paper-input type="file" id="input"></paper-input>
      <button on-tap="_handleFiles">Log file info</button>
    </template>
  </dom-module>
</body>
Run Code Online (Sandbox Code Playgroud)

codepen