image - 使用 Flutter Image Picker 保证用户选择了图像

Question

我正在使用 image_picker 库 ( https://pub.dartlang.org/packages/image_picker#-readme-tab- ) 来允许用户从他们的照片库/图库中选择个人资料图像。在 iOS 上，用户只能访问他们照片中的照片，但在 Android 上，用户可以转到文件管理器并选择不同的文件类型，例如音频。简单地检查 null，并不能保证用户选择了图像。

在 Dart/Flutter 中有没有一种方法可以确保 _imageFile 是一个可以成功使用 FileImage 构造函数的图像？

Future getImage() async {

    if(currentUser.isLoggedIn) {
      _imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
      setState(() {

        if (_imageFile != null) {
          currentUser.profileImage = FileImage(_imageFile);
          uploadImage();
        } else {
          print('no image selected');
        }
      });
    }

这是从文件管理器中选择音频文件时的错误报告:

E/flutter (14947): [ERROR:flutter/lib/ui/painting/codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
I/flutter (14947): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter (14947): The following _Exception was thrown resolving an image codec:
I/flutter (14947): Exception: operation failed
I/flutter (14947): 
I/flutter (14947): When the exception was thrown, this was the stack:
I/flutter (14947): #0      FileImage._loadAsync (package:flutter/src/painting/image_provider.dart:579:12)
I/flutter (14947): <asynchronous suspension>
I/flutter (14947): #1      FileImage.load (package:flutter/src/painting/image_provider.dart:564:14)
I/flutter (14947): #2      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:299:46)
I/flutter (14947): #3      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:157:22)
I/flutter (14947): #4      ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:299:23)
I/flutter (14947): #5      SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:38:29)
I/flutter (14947): #6      ImageProvider.resolve (package:flutter/src/painting/image_provider.dart:296:9)
I/flutter (14947): #7      DecorationImagePainter.paint (package:flutter/src/painting/decoration_image.dart:239:55)
I/flutter (14947): #8      _BoxDecorationPainter._paintBackgroundImage (package:flutter/src/painting/box_decoration.dart:414:19)
I/flutter (14947): #9      _BoxDecorationPainter.paint (package:flutter/src/painting/box_decoration.dart:432:5)
I/flutter (14947): #10     RenderDecoratedBox.paint (package:flutter/src/rendering/proxy_box.dart:1968:16)
I/flutter (14947): #11     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2104:7)
I/flutter (14947): #12     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
I/flutter (14947): #13     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:123:15)
I/flutter (14947): #14     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2104:7)
I/flutter (14947): #15     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
I/flutter (14947): #16     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:123:15)
I/flutter (14947): #17     RenderPointerListener.paint (package:flutter/src/rendering/proxy_box.dart:2645:11)
I/flutter (14947): #18     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2104:7)
I/flutter (14947): #19     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
I/flutter (14947): #20     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:123:15)
I/flutter (14947): #21     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2104:7)
I/flutter (14947): #22     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
I/flutter (14947): #23     RenderShiftedBox.paint (package:flutter/src/rendering/shifted_box.dart:70:15)
I/flutter (14947): #24     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2104:7)
I/flutter (14947): #25     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
I/flutter (14947): #26     _RenderStack&RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2273:15)
I/flutter (14947): #27     RenderStack.paintStack (package:flutter/src/rendering/stack.dart:594:5)
I/flutter (14947): #28     RenderStack.paint (package:flutter/src/rendering/stack.dart:602:7)
I/flutter (14947): #29     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2104:7)
I/flutter (14947): #30     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
I/flutter (14947): #31     RenderShiftedBox.paint (package:flutter/src/rendering/shifted_box.dart:70:15)
I/flutter (14947): #32     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2104:7)
I/flutter (14947): #33     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
I/flutter (14947): #34     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:123:15)
I/flutter (14947): #35     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2104:7)
I/flutter (14947): #36     PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:128:11)
I/flutter (14947): #37     PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:96:5)
I/flutter (14947): #38     PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:859:29)
I/flutter (14947): #39     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:338:19)
I/flutter (14947): #40     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:701:13)
I/flutter (14947): #41     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:275:5)
I/flutter (14947): #42     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1008:15)
I/flutter (14947): #43     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:948:9)
I/flutter (14947): #44     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:860:5)
I/flutter (14947): #48     _invoke (dart:ui/hooks.dart:219:10)
I/flutter (14947): #49     _drawFrame (dart:ui/hooks.dart:178:3)
I/flutter (14947): (elided 3 frames from package dart:async)
I/flutter (14947): 
I/flutter (14947): Path: /data/user/0/com.undauntedathlete.UndauntedGolf/cache/image_picker2760241735413495899jpg
I/flutter (14947): ════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

恕我直言，这是您使用的文件管理器中的一个错误，因为 image_picker 插件确实请求 pickImageIntent.setType("image/*"); (例如，Google 云端硬盘提供商只允许选择图片)。

所以基本上你必须自己检查。我认为共有三种方法，具体取决于您要求解决方案的复杂程度。

1. 通过简单地检查 File.path 是否以已知的图像文件扩展名结尾来进行低质量检查。(您可以使用例如已经包含 mime 的 good list of extensions dart 包。<
2. 有点 hackish:在检索 File 后，使用 ImageFile.resolve 尝试解析图像，然后在图像本身上设置它(捕获错误和警告用户)
3. 需要更多工作，但可能是最干净的解决方案:使用 Image() 显示时使用自定义 ImageProvider，解析图像时捕获错误并适当处理。

这显然取决于您的要求，如果您让用户选择一张图片并立即上传，nr 2. 将最有意义。如果您首先让用户使用 nr 3 预览图像。 -- 或者如果您只是上传它，让用户上传图像并进行服务器端检查甚至是有意义的。因此，例如，用户可以选择服务器可能能够处理的 SVG，但 flutter 不能(开箱即用)。