Как выбрать файл

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свойство для доступа к файлам и использования класса 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 потоки событий.

Полный пример

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

Ниже

Answer 2

Загрузка изображения во Flutter Web - у меня отлично работает :)

       startFilePicker() async {
    FileUploadInputElement uploadInput = FileUploadInputElement();
    uploadInput.multiple = true;
    uploadInput.draggable = true;
    uploadInput.click();

    uploadInput.onChange.listen((e) {
      // read file content as dataURL
      final files = uploadInput.files;
      print(files);
      if (files != null && files.isNotEmpty) {
        for (var i = 0; i < files.length; i++) {
          FileReader reader = FileReader();
          reader.onLoadEnd.listen((e) async {
            if (reader.result != null) {
              Uint8List? _byteData = reader.result as Uint8List;
// upload the image
            }
          });
          reader.onError.listen((fileEvent) {
            Fluttertoast.showToast(
                msg: "Some Error occured while reading the file");
          });
          reader.readAsArrayBuffer(files[i]);
        }
      } else {
        Fluttertoast.showToast(msg: 'Images not selected');
      }
    });
  }