Flutter Web 图像选择器仅获取图像文件答案

【问题标题】：Flutter Web Image picker get only images filesFlutter Web 图像选择器仅获取图像文件
【发布时间】：2020-04-15 05:51:04
【问题描述】：

我正在尝试从flutter web获取图像，现在我正在这样做

try {
  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(() {
          print(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(() {
        backgroundBytes = base64.decode(stripped);
        backgroundImage = input.files[0];
        metaDataBackground = input.files[0].type;
      });
    });
  });

  input.click();
} catch (e) {
  print('Error background image');
}

它工作得很好，但用户可以更改所有文件承认的文件类型，我必须阻止该操作

Bloack acction picker

有什么办法吗？

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

您无法阻止该操作，请参阅参考Limit file format when using <input type="file">?
使用 accept 属性仅提供一种过滤感兴趣类型文件的方法。浏览器仍然允许用户选择任何类型的文件。

在input.onChange.listen 中，您可以检查file extension type 和alert 警告用户他没有选择正确的类型

【讨论】：