Flutter web image_picker没有找到实现

Question

我正在使用 0.6.7+22 版的 image_picker Flutter 包从我的 Flutter Web 应用程序中的设备中挑选图像。我在弹出窗口中调用 getImage 函数：

class _ImageVerificationPopUpState extends State<ImageVerificationPopUp> {
  File _image;
  final picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text("Upload screenshot"),
      content: SizedBox(
        width: MediaQuery.of(context).size.width * 0.3,
        child: Center(
          child: _image != null
              ? SelectedImage(kIsWeb ? Image.network(_image.path) : Image.file(_image), () {
                  setState(() {
                    _image = null;
                  });
                })
              : SelectImageButton(_getImage),
        ),
      ),
      actions: [
        TextButton(onPressed: () => Navigator.of(context).pop(), child: Text("Cancel")),
        TextButton(
            onPressed: () {
              final ImageCubit imageCubit = BlocProvider.of<imageCubit>(context);
              imageCubit.uploadImage(_image);
              Navigator.pop(context);
            },
            child: Text("Upload"))
      ],
      backgroundColor: Color(0xFF333D81),
    );
  }

  Future<void> _getImage() async {
    final PickedFile pickedFile = await picker.getImage(source: ImageSource.gallery);
    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print("No image selected");
      }
    });
  }
}

按下按钮后，它会抛出以下错误：

Error: MissingPluginException(No implementation found for method pickImage on channel plugins.flutter.io/image_picker)
    at Object.throw_ [as throw] (http://localhost:7357/dart_sdk.js:5331:11)
    at platform_channel.MethodChannel.new._invokeMethod (http://localhost:7357/packages/flutter/src/services/system_channels.dart.lib.js:954:21)
    at _invokeMethod.next (<anonymous>)
    at http://localhost:7357/dart_sdk.js:39029:33
    at _RootZone.runUnary (http://localhost:7357/dart_sdk.js:38886:58)
    at _FutureListener.thenAwait.handleValue (http://localhost:7357/dart_sdk.js:33872:29)
    at handleValueCallback (http://localhost:7357/dart_sdk.js:34432:49)
    at Function._propagateToListeners (http://localhost:7357/dart_sdk.js:34470:17)
    at _Future.new.[_completeWithValue] (http://localhost:7357/dart_sdk.js:34312:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:7357/dart_sdk.js:34335:35)
    at Object._microtaskLoop (http://localhost:7357/dart_sdk.js:39173:13)
    at _startMicrotaskLoop (http://localhost:7357/dart_sdk.js:39179:13)
    at http://localhost:7357/dart_sdk.js:34686:9

我已经尝试调用 flutter clean、flutter pub get 并重新运行我的应用程序，但它没有帮助。
我该如何解决这个问题？

提前感谢您的帮助！

Answer 1

尝试将包 image_picker_for_web 添加到您的 pubspec.yaml 文件中。

...
dependencies:
  ...
  image_picker: ^0.6.7
  image_picker_for_web: ^0.1.0
  ...
...

然后修改你的 _getImage 方法：

Future<void> _getImage() async {
    final PickedFile pickedFile = await picker.getImage(source: ImageSource.gallery);
    setState(() {
      if (pickedFile != null) {
       if (kIsWeb) { // Check if this is a browser session
         _image = Image.network(pickedFile.path);
       } else {
         _image = Image.file(File(pickedFile.path));
       }
      } else {
        print("No image selected");
      }
    });
  }

我认为这就是它对我有用的原因。我收到了和你一样的错误信息。