Question

我正在学习AngularDart，目前正在尝试使用文件上传按钮在模板中读取以下文件来读取文件。

<input type="file" (change)="onFileChanged($event)">

并且我的事件处理程序当前处于这种形式，但是似乎没有任何作用。使用控制台调试，我知道它的类型为File，但是使用诸如open和readAsString之类的任何方法都会失败。 To String有效，但是在这种情况下onyl给出了对象的类型，[object File]

import 'dart:io';
import 'dart:html';

import 'package:angular/angular.dart';

// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: [coreDirectives],
)

class AppComponent {
  String contents;

  onFileChanged(event) {
    contents = event.target.files[0].open(Mode: FileMode.read);
    window.console.debug(contents);
  }
}

感谢帖子的帮助，我的问题与我类似，我得到了它的帮助。我仍然利用事件处理程序，并确保我 DID NOT 都没有导入dart：io和dart：html，只需要dart：html。

这就是我的最终事件处理程序的样子。

import 'dart:html';

import 'package:angular/angular.dart';

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: [coreDirectives],
)

class AppComponent {
  String contents;

  AppComponent();

  void fileUpload(event) {
    InputElement input = window.document.getElementById("fileUpload");
    File file = input.files[0];
    FileReader reader = FileReader();
    reader.readAsText(file);
    reader.onLoad.listen((fileEvent) {
      contents = reader.result;
    });
  }
}

这是我的模板的样子：

<h1>File upload test</h1>
<input type="file" (change)="fileUpload($event)" id="fileUpload">
<div *ngIf="contents != null">
    <p>Hi! These are the contents of your file:</p>
    <p>{{contents}}</p>
</div>

从AngularDart中的输入标签读取文件

0 个答案: