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

Question

我正在尝试上传通过 Polymer <paper-input type="file" id="filepicker"> 元素选择的文件，但是当我尝试使用以下内容访问该文件时：

var file = this.$.filepicker.files

我收到 files is not defined 错误。

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

如有任何帮助，我们将不胜感激！

Answer 1

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

this.$.filepicker.inputElement.inputElement.files[0];

注意：在<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]);
    }
  });
});

<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>

^codepen

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

Access file selected with paper-input

javascript

web-component

polymer