将图像 FlutterWebImagePicker 输出转换为文件答案

【问题标题】：Converting Image FlutterWebImagePicker Output to File将图像 FlutterWebImagePicker 输出转换为文件
【发布时间】：2020-11-22 07:21:36
【问题描述】：

我正在将 Flutter Web 用于 Web 应用程序，并且无法将图像从图像选择器转换为文件以便将其上传到我的服务器。我在 Image.file(xxx) 中显示图像，但出现错误：

尝试加载资产时出错：FormatException: Illegal scheme 字符（在字符 6 处） Image(image:%20MemoryImage(Uint8List%234267a,%20scale:%201),%20frameBuilder...

这是我正在尝试的代码：

Future getImage(bool isCamera) async {

    Image image;

    if (isCamera) {
      image = await FlutterWebImagePicker.getImage;
    } else {
    }

     var bytes = await rootBundle.load('$image');
    String tempPath = (await getTemporaryDirectory()).path;
    File file = File('$tempPath/profile.png');

    await file.writeAsBytes(
        bytes.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes));


    setState(() {
      currentSelfie = file;
      _accDetails['customer_selfie'] = currentSelfie;
    });
  }

提前致谢

【问题讨论】：

您是否尝试从您的 Finder/Windows 资源管理器中获取图像？你不需要图书馆。即使您尝试从笔记本电脑/手机获取图像也非常简单。如果是这种情况，请告诉我，我将发布获取文件的完整过程。
@marianoZorrilla 你有完整流程的链接吗？我只是从移动设备/桌面获取照片

标签： flutter dart flutter-web imagepicker

【解决方案1】：

我已经测试了这个包并且对结果非常满意imagePickerWeb它返回了 3 种不同的类型，可以是图像（用于预览的小部件）、字节、文件（上传）的形式

然后你可以使用它来获取值

 html.File _cloudFile;
 var _fileBytes;
 Image _imageWidget;
 
 Future<void> getMultipleImageInfos() async {
    var mediaData = await ImagePickerWeb.getImageInfo;
    String mimeType = mime(Path.basename(mediaData.fileName));
    html.File mediaFile =
        new html.File(mediaData.data, mediaData.fileName, {'type': mimeType});

    if (mediaFile != null) {
      setState(() {
        _cloudFile = mediaFile;
        _fileBytes = mediaData.data;
        _imageWidget = Image.memory(mediaData.data);
      });
    }

【讨论】：

如果您要上传，请在此处使用我的答案stackoverflow.com/questions/56252856/…

【解决方案2】：

虽然您的代码有 2 个问题，但我没有使用过该插件。一个是 if 语句，第二个是使用 Rootbundle。如果您从文件系统中挑选，我的假设 isCamera 将是错误的。您没有为虚假条件添加任何逻辑。

 if (isCamera) {// This would be true if the source was camera
  image = await FlutterWebImagePicker.getImage;
 } else {

 }

另外，

var bytes = await rootBundle.load('$image');

从 Flutter 文档中，rootbundle 包含应用程序构建时打包的资源。这些是您在 pubspec 中定义的资产。 yaml。您在运行时选择图像，因此它没有捆绑为资产。

由于包似乎返回一个图像对象，因此请在图像上使用toByteData 方法，即

image = await FlutterWebImagePicker.getImage;
await image.toByteData();//This method has some parameters. Look into them

【讨论】：