图像选择器颤振 web 1.9

Posted 2023-02-23

【中文标题】图像选择器颤振 web 1.9

【英文标题】：Image picker flutter web 1.9

【发布时间】：2020-01-22 09:44:13

【问题描述】：

在新的 Flutter web 1.9 上寻找图像选择器。我找到了一种方法，但不到 1.9，现在合并了，不知道我怎么能做到这一点。尝试使用 dart:html 但无法发布！仅在运行时

【参考方案1】：

看来Flutter web 1.10 dev，universal_html package是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...'),
      ),
    );
  

【讨论】：

谢谢它工作正常，但我们怎样才能保持它的类型为图像？我只是想将它上传到 firebase，但它没有作为图片上传。

html.InputReader 和 html.FileReader 没有成功导入，显示错误。你能告诉我们如何解决它吗？

@Umair 确保您在pubspec.yaml 中指定了正确的package，并且您的代码中没有使用html-alias 导入的其他包。

编译器消息：lib/main.dart:240:5：错误：工厂重定向到类“FileReader”，这是抽象的，无法实例化。目标 kernel_snapshot 失败：异常：创建快照时出错：null build failed。

@Umair 您可以创建一个新问题。显示您的pubspec.yaml 和lib/main.dart 文件中的代码

【参考方案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();

【讨论】：

谢谢Bulkin，真的很有帮助！！

@Bulkin 谢谢！将我保存为 image_picker_web 与 ios 有冲突（对于我使用 image_picker 的设备），我的应用程序同时在网络和设备上运行。

天哪。你是我的英雄。你到底是怎么想出来的？我认为在移动网络上，颤动代码在文件选择期间以某种方式作为背景......但我完全不知道要改变什么。我需要更好地理解你的文档。追加

【参考方案3】：

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

它还支持多种输出类型（文件、小部件、Uint8List）

【讨论】：

我试过了，不起作用，位置上的类型未知。如果有人让它工作，让我知道。这是包“问题”中的一个问题

但它只支持网页