9

我正在尝试 Dart，但我不知道如何将图像从用户发送到服务器。我有我的输入标签，我可以在 DART 代码中找到它，但我似乎无法从中读取。我正在尝试类似的东西：

InputElement ie = document.query('#myinputelement');

ie.on.change.add((event){<br/>
    InputElement iee = document.query('#myinputelement');<br/>
    FileList mfl =  iee.files;<br/>
    File myFile = mlf.item(0);<br/>

    FileReader fr = new FileReader();
    fr.readAsBinaryString(myFile);

    String result = fr.result; //this is always empty
});

使用包含以下内容的html：

<input type="file" id="myinputelement">

我真的希望你不能帮助我，我有点卡住了。我可能只是想念如何为文件阅读器进行加载，或者我做错了。

4

5 回答 5

12

FileReader API 是异步的，因此您需要使用事件处理程序。

var input = window.document.querySelector('#upload');
Element log = query("#log");

input.addEventListener("change", (e) {
  FileList files = input.files;
  Expect.isTrue(files.length > 0);
  File file = files.item(0);

  FileReader reader = new FileReader();
  reader.onLoad = (fileEvent) {
    print("file read");
    log.innerHTML = "file content is ${reader.result}";
  };
  reader.onerror = (evt) => print("error ${reader.error.code}");
  reader.readAsText(file);
});

您还需要允许从浏览器上传文件，这可以在 Chrome 中通过使用标志--allow-file-access-from-files启动它来完成

于 2012-02-09T16:50:33.497 回答
6

这是如何使用dart:html.

document.querySelector('#myinputelement`).onChange.listen((changeEvent) {
    List fileInput = document.querySelector('#myinputelement').files;

    if (fileInput.length > 1) {
        // More than one file got selected somehow, could be a browser bug.
        // Unless the "multiple" attribute is set on the input element, of course
    }
    else if (fileInput.isEmpty) {
        // This could happen if the browser allows emptying an upload field
    }

    FileReader reader = new FileReader();
    reader.onLoad.listen((fileEvent) {
          String fileContent = reader.result;
          // Code doing stuff with fileContent goes here!
    });

    reader.onError.listen((itWentWrongEvent) {
          // Handle the error
    });

    reader.readAsText(fileInput[0]);
});
于 2016-09-14T22:19:57.970 回答
2

没有必要（不再）使用 dart:dom FileReader 而不是来自 dart:html 的那个。

如果您将事件侦听器添加到文件阅读器，您的代码应该可以工作，如下所示： 

FileReader fr = new FileReader();
fr.on.load.add((fe) => doSomethingToString(fe.target.result));
fr.readAsBinaryString(myFile);
于 2012-05-21T14:17:15.217 回答
2

我的尝试

  void fileSelected(Event event) async {
    final files = (event.target as FileUploadInputElement).files;
    if (files.isNotEmpty) {
      final reader = new FileReader();

      // ignore: unawaited_futures
      reader.onError.first.then((evt) => print('error ${reader.error.code}'));
      final resultReceived = reader.onLoad.first;
      reader.readAsArrayBuffer(files.first);

      await resultReceived;
      imageReference.fileSelected(reader.result as List<int>);
    }
  }
于 2018-03-01T19:36:39.373 回答
0

感谢这篇文章的帮助，我得到了它的工作。我仍然在输入标签中使用了我的事件处理程序，并确保我没有同时导入 dart:io 和 dart:html，只需要 dart:html。

这就是我最终的 AppComponent 的样子。

import 'dart:html';

import 'package:angular/angular.dart';

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

class AppComponent {
  // Stores contents of file upon load
  String contents;

  AppComponent();

  void fileUpload(event) {
    // Get tag and the file 
    InputElement input = window.document.getElementById("fileUpload");
    File file = input.files[0];

    // File reader and event handler for end of loading
    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>
于 2018-07-26T17:53:27.837 回答