Question

我正在尝试将文件上传与Dart＆amp;组合使用聚合物。请考虑以下文件：

我-upload.html

<polymer-element name="my-upload">
  <template>
    <style></style>
    <input type="file" id="uploader" bind-files="{{files}}" on-change="{{uploadFiles}}" multiple>
  </template>
  <script type="application/dart" src="my-upload.dart"></script>
</polymer-element>

我-upload.dart

@CustomTag('my-upload')
class MyUpload extends PolymerElement {        
  @observable FileList files;

  MyUpload.created() : super.created();

  void uploadFiles(event, details, target) {        
    print(files);
  }
}

uploadFiles中的print语句始终打印为null。看来，fileList没有绑定到observable。有没有办法解决这个问题？我是否必须使用另一个语句而不是bind-files？

当然，有一种解决方法，但它忽略了这一点，我认为：

我-upload.dart

@CustomTag('my-upload')
class MyUpload extends PolymerElement {  
  FileUploadInputElement uploader;

  MyUpload.created() : super.created() {
    uploader = $['uploader'];    
  }

  void uploadFiles(event, details, target) {        
    print(uploader.files);
  }
}

有什么想法吗？

Answer 1

FileList无法观察到。使用@observable注释，您只能观察文件是否已更改，以使其指向不同的FileList，但不指向FileList内的更改。

我无法在您的示例中看到一个令人信服的理由，为什么您需要一个可观察的FileList。你想用它做的比我们从例子中看到的更多吗？

您可以简化代码。我不知道这在你的用例中是否有意义：

@CustomTag('my-upload')
class MyUpload extends PolymerElement {  

  void uploadFiles(event, details, target) {        
    FileUploadInputElement uploader = $['uploader'];   
    print(uploader.files);
  }
}

甚至更短

@CustomTag('my-upload')
class MyUpload extends PolymerElement {  

  void uploadFiles(event, details, target) {        
    print($['uploader'].files);
  }
}

如何在Dart Polymer中将FileList绑定到Observable？

1 个答案: