File upload 文件输入和Dart

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

InputElement ie=document.query（'#myinputelement'）；
ie.on.change.add（（事件）{

InputElement iee=document.query（“#myinputelement”）；

FileList mfl=iee.files；

File myFile=mlf.item（0）；

FileReader fr=新的FileReader（）；
fr.readAsBinaryString（myFile）；
String result=fr.result；//始终为空
});

html包含：

我真的希望你能帮我，我有点困了。我可能只是错过了如何为filereader进行onload，或者我做的完全错误

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

var input=window.document.querySelector（'#upload'）；
元素日志=查询（“#日志”）；
input.addEventListener（“更改”，（e）{
FileList files=input.files；
Expect.isTrue（files.length>0）；
文件=文件。项（0）；
FileReader=新的FileReader（）；
reader.onLoad=（fileEvent）{
打印（“文件读取”）；
log.innerHTML=“文件内容为${reader.result}”；
};
reader.onerror=（evt）=>print（“error${reader.error.code}”）；
reader.readAsText（文件）；
});

您还需要允许将文件从上载到浏览器，这可以在Chrome中通过标记“允许从文件访问文件”

来完成。不再需要使用dart:dom文件读取器而不是使用dart:html文件读取器

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

FileReader fr=newfilereader（）；
fr.on.load.add（（fe）=>doSomethingToString（fe.target.result））；
fr.readAsBinaryString（myFile）；

这是如何使用

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]);
});

我的尝试

  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>);
    }
  }

void fileSelected（事件）异步{
最终文件=（event.target作为FileUploadInputElement）。文件；
if（files.isNotEmpty）{
最终读取器=新文件读取器（）；
//忽略：未完成的未来
reader.onError.first.then（（evt）=>print（'error${reader.error.code}'）；
最终结果接收=reader.onLoad.first；
reader.readAsArrayBuffer（files.first）；
等待收到的结果；
选择imageReference.files（reader.result作为列表）；
}
}

多亏了这篇文章的帮助，我让它开始工作了。我仍然在输入标记中使用我的事件处理程序，并确保我没有同时导入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>

文件上传测试
嗨！以下是文件的内容：

{{contents}}

您是否通过

文件：//

协议在Chrome中加载页面？如果是这样的话，您可能需要启用一些标志，或者将文件上传到某处，以便通过HTTP访问它们。使用dart:html时，不能将处理程序添加到文件读取器。希望你帮不上忙：两个库一起使用的填充示例

getter'files'没有为类型'Element'定义。尝试导入定义“文件”的库，将名称更正为现有getter的名称，或定义名为“文件”的getter或字段。dartundefined\u getter