图像选择器颤振网络 1.9

Question

在新的颤振Web 1.9上查找图像选择器。我找到了一种方法，但不到 1.9，现在合并了不知道我如何实现这一点。尝试使用 dart：html，但无法发布！仅在运行时

Answer 1

似乎至于Flutter web 1.10 dev，universal_html包是暂时空缺的dart:html职位的好候选者：

import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:universal_html/prefer_universal/html.dart' as html;
class ImagePickerLabPage extends StatefulWidget {
@override
_ImagePickerLabPageState createState() => _ImagePickerLabPageState();
}
class _ImagePickerLabPageState extends State<ImagePickerLabPage> {
String name = '';
String error;
Uint8List data;
pickImage() {
final html.InputElement input = html.document.createElement('input');
input
..type = 'file'
..accept = 'image/*';
input.onChange.listen((e) {
if (input.files.isEmpty) return;
final reader = html.FileReader();
reader.readAsDataUrl(input.files[0]);
reader.onError.listen((err) => setState(() {
error = err.toString();
}));
reader.onLoad.first.then((res) {
final encoded = reader.result as String;
// remove data:image/*;base64 preambule
final stripped =
encoded.replaceFirst(RegExp(r'data:image/[^;]+;base64,'), '');
setState(() {
name = input.files[0].name;
data = base64.decode(stripped);
error = null;
});
});
});
input.click();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(name),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.open_in_browser),
onPressed: () {
pickImage();
},
),
body: Center(
child: error != null
? Text(error)
: data != null ? Image.memory(data) : Text('No data...'),
),
);
}
}

Answer 2

实际上 onChange 在移动 safari 上效果不佳，它需要更改 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();
}

Answer 3

你为什么不直接使用： https://pub.dev/packages/image_picker_web

它还支持多种输出类型(文件，小部件，Uint8List(