Question

我正在使用旧版本构建颤动网络。我有一个FileUploadInputElement。我需要从该元素中选择文件。

@override
  Widget build(BuildContext context) {
    FileUploadInputElement fileUploadInputElement = FileUploadInputElement();
    ui.platformViewRegistry.registerViewFactory(
        'animation-Image-html', (int viewId) => fileUploadInputElement);



    return SizedBox(
      child: HtmlElementView(
        viewType: 'animation-Image-html',
      ),
    );
}

Answer 1

您可以直接使用element.files属性来访问文件，并使用dart:html中的Filreader类。我在下面创建了一个示例，向您展示如何读取文本文件和图像。此示例基于另一篇文章中的FileReader examples。

访问文件

element是FileUploadInputElement的引用。

element.files[0]或多个文件element.files

设置文件阅读器

  String option1Text = "Initialized text option1";
  Uint8List uploadedImage;
  FileUploadInputElement element = FileUploadInputElement()..id = "file_input";
  // setup File Reader
  FileReader fileReader = FileReader();

使用FileReader读取文件

fileReader.readAsText(element.files[0])

为加载事件连接监听器

fileReader.onLoad.listen((data) {
              setState(() {
                option1Text = fileReader.result;
              });
            });

连接错误事件

fileReader.onError.listen((fileEvent) {
              setState(() {
                option1Text = "Some Error occured while reading the file";
              });
            });

使用Image.memory显示字节数组中的图像。

Image.memory(uploadedImage)

注意：在以下示例中，我们选择一个文件，然后单击相应的按钮以处理文件读取。但是，可以通过以类似方法将FileUploadInputElement元素的各个事件中的逻辑连接起来来实现相同的目的。例如：element.onLoad.listen或element.onError.listen事件流。

完整示例

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:html';

class FileUploadTester extends StatefulWidget {
  @override
  _FileUploadTesterState createState() => _FileUploadTesterState();
}

class _FileUploadTesterState extends State<FileUploadTester> {
  String option1Text = "Initialized text option1";
  Uint8List uploadedImage;
  FileUploadInputElement element = FileUploadInputElement()..id = "file_input";
  // setup File Reader
  FileReader fileReader = FileReader();

  // reader.onerror = (evt) => print("error ${reader.error.code}");
  @override
  Widget build(BuildContext context) {
    ui.platformViewRegistry.registerViewFactory("add_input", (int viewId) {
      return element;
    });
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        FlatButton(
          color: Colors.indigoAccent,
          child: Text('ReadFile'),
          onPressed: () {
            fileReader.onLoad.listen((data) {
              setState(() {
                option1Text = fileReader.result;
              });
            });
            fileReader.onError.listen((fileEvent) {
              setState(() {
                option1Text = "Some Error occured while reading the file";
              });
            });
            fileReader.readAsText(element.files[0]);
          },
        ),
        Expanded(
          child: Container(
            child: Text(option1Text),
          ),
        ),
        Expanded(child: HtmlElementView(viewType: 'add_input')),
        Expanded(
          child: uploadedImage == null
              ? Container(
                  child: Text('Uploaded image should shwo here.'),
                )
              : Container(
                  child: Image.memory(uploadedImage),
                ),
        ),
        FlatButton(
          child: Text('Show Image'),
          color: Colors.tealAccent,
          onPressed: () {
            fileReader.onLoad.listen((data) {
              setState(() {
                uploadedImage = fileReader.result;
              });
            });
            fileReader.onError.listen((fileEvent) {
              setState(() {
                option1Text = "Some Error occured while reading the file";
              });
            });
            fileReader.readAsArrayBuffer(element.files[0]);
          },
        ),
      ],
    );
  }
}

以下

如何选择文件

1 个答案: