Чтение файла из входного тега в AngularDart

Я работаю над изучением 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);
  }
}

Благодаря помощи из сообщения с таким же вопросом, как и мой, у меня все заработало. Я все еще использовал свой обработчик событий и убедился, что НЕ импортирует как 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>

Если связанный ответ не решает вашу проблему, просто добавьте комментарий, и я отключу его.

Günter Zöchbauer 26.07.2018 19:48
1
1
382
0

Другие вопросы по теме