Flutter Web端使用Image Picker选择图片失败（MissingPluginException异常）

这个问题的核心原因很明确：你使用的permission_handler插件并不支持Web平台，当你在Web上调用Permission.photos.request()时，找不到对应的原生实现，就会抛出MissingPluginException。而且Web平台访问本地文件和移动端逻辑完全不同——浏览器会通过自带的文件选择器自动处理权限，不需要提前申请。

下面是具体的解决方案，我会帮你修改代码适配Web平台：

步骤1：调整依赖（可选） #

如果你的项目只需要在Android和Web运行，你可以直接移除permission_handler依赖；如果还要支持其他移动端平台，可以保留它，但在代码中仅在非Web平台调用权限请求。

步骤2：修改核心代码 #

主要改动点包括：

• 用XFile?代替File存储选中的图片（Web平台没有本地File对象的概念）
• 增加平台判断，Web端跳过权限请求
• 根据平台选择对应的图片显示方式

修改后的完整代码：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:permission_handler/permission_handler.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Project2',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 改用XFile存储，适配Web和移动端
  XFile? _selectedImage;

  uploadImage() async {
    final ImagePicker _picker = ImagePicker();
    final XFile? image;

    // 仅非Web平台请求权限
    if (!kIsWeb) {
      var permissionStatus = await requestPermissions();
      if (!permissionStatus.isGranted) {
        showToast("Permission not granted");
        return;
      }
    }

    // 直接选择图片
    image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      setState(() {
        _selectedImage = image;
      });
    } else {
      showToast("No image selected");
    }
  }

  Future<PermissionStatus> requestPermissions() async {
    await Permission.photos.request();
    return Permission.photos.status;
  }

  void showToast(String message) {
    Fluttertoast.showToast(
      msg: message,
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.BOTTOM,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.red,
      textColor: Colors.white,
      fontSize: 16.0,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Upload Image"),
      ),
      body: Column(
        children: [
          // 根据平台选择图片显示方式
          _selectedImage != null
              ? kIsWeb
                  ? Image.network(_selectedImage!.path) // Web用blob URL
                  : Image.file(File(_selectedImage!.path)) // 移动端用本地文件
              : Image.asset("assets/img/images.jpeg"),
          SizedBox(
            height: 20,
            width: double.infinity,
          ),
          ElevatedButton(
            onPressed: () => uploadImage(),
            child: Text("Upload"),
          )
        ],
      ),
    );
  }
}

步骤3：验证Web配置 #

最新版本的image_picker已经自动适配Web环境，你使用的image_picker: ^0.8.3+3版本支持自动配置，无需手动修改web/index.html。

测试步骤 #

1. 执行flutter clean清理缓存
2. 运行Web项目：flutter run -d chrome
3. 点击上传按钮，此时浏览器会弹出文件选择器，选择图片后即可正常显示。

这样修改后，你的代码就能同时在Android和Web平台正常运行了。

内容的提问来源于stack exchange，提问作者PriyanshuG