загрузка изображений на Flutter Web с помощью паба, отличного от средства выбора изображений

Я хочу загружать изображения во Flutter Web, но известный мне паб, например image_picker, поддерживает только Android и iOS, а Flutter Web не поддерживает его. еще один паб, который я знаю, - это изображение паба, но я не знаю, как использовать изображение паба на флаттер-сети .. Я прошу поделиться своими знаниями об использовании изображений паба или других пабов для загрузки изображений, поддерживающих флаттер-сеть ..


flutter-web
person oceany    schedule 30.07.2019    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Я искал такое же решение. На самом деле onChange не работает в мобильном сафари, ему нужно изменить addEventListener, а также добавить его.

  Future<void> _setImage() async {
    final completer = Completer<List<String>>();
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.multiple = true;
    uploadInput.accept = 'image/*';
    uploadInput.click();
    //* onChange doesn't work on mobile safari
    uploadInput.addEventListener('change', (e) async {
      // read file content as dataURL
      final files = uploadInput.files;
      Iterable<Future<String>> resultsFutures = files.map((file) {
        final reader = FileReader();
        reader.readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result as String);
      });

      final results = await Future.wait(resultsFutures);
      completer.complete(results);
    });
    //* need to append on mobile safari
    document.body.append(uploadInput);
    final List<String> images = await completer.future;
    setState(() {
      _uploadedImages = images;
    });
    uploadInput.remove();
  }

Это также работает:

Future<void> _setImage() async {   
    final completer = Completer<List<String>>();
    final InputElement input = document.createElement('input');
    input
      ..type = 'file'
      ..multiple = true
      ..accept = 'image/*';
    input.click();
    // onChange doesn't work on mobile safari
    input.addEventListener('change', (e) async {
      final List<File> files = input.files;
      Iterable<Future<String>> resultsFutures = files.map((file) {
        final reader = FileReader();
        reader.readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result as String);
      });
      final results = await Future.wait(resultsFutures);
      completer.complete(results);
    });
    // need to append on mobile safari
    document.body.append(input);
    // input.click(); can be here
    final List<String> images = await completer.future;
    setState(() {
      _uploadedImages = images;
    });
    input.remove();
}
person user12208004    schedule 19.12.2019
comment
вы можете использовать Image.memory. Бывший. показывает первое изображение _uploadedImages Image.memory(base64Decode(_uploadedImages[0].toString().split(',')[1]) - person user12208004; 25.01.2020

arrow_upward
1
arrow_downward

вы можете использовать FileUploadInputElement класс dart: html.

import 'dart:html';

Реализуйте следующий код, чтобы запустить средство выбора файлов:

_startFilePicker() async {
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();

uploadInput.onChange.listen((e) {
  // read file content as dataURL
  final files = uploadInput.files;
  if (files.length == 1) {
    final file = files[0];
    final reader = new FileReader();

    reader.onLoadEnd.listen((e) {
      _handleResult(reader.result);
    });
    reader.readAsDataUrl(file);
  }
});
}

использованная литература

person Tinus Jackson    schedule 31.07.2019