Как получить выбранный файл - PullRequest
Новая
       10

Как получить выбранный файл

0 голосов
/ 26 сентября 2019

Я создаю флаттер, используя старую версию.У меня есть 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',
      ),
    );
}

1 Ответ

0 голосов
/ 26 сентября 2019

Вы можете напрямую использовать свойство element.files для доступа к файлам и использовать класс Filreader из dart:html.Я создал пример ниже, чтобы показать вам, как можно прочитать текстовый файл и изображение.Этот пример основан на Примерах FileReader в другом сообщении.

Доступ к файлу

Здесь 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 потоки событий.

Полный пример enter image description here

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

Ниже

...