Flutter Web中如何展示通过file_picker选择的图片？

核心思路 #

Flutter Web环境无法访问本地文件路径，因此需通过文件字节流生成可展示的图片。我们需要同时维护两个列表：一个存储用于上传的MultipartFile对象，另一个存储用于UI展示的图片字节数据Uint8List。

完整实现代码 #

import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:http/http.dart' as http;

class ImagePickerPage extends StatefulWidget {
  const ImagePickerPage({super.key});

  @override
  State<ImagePickerPage> createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
  // 存储待上传的MultipartFile列表
  List<http.MultipartFile> _uploadFiles = [];
  // 存储用于展示的图片字节数据
  List<Uint8List> _imageBytesList = [];

  Future<void> pickUploadFiles() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles(
      allowMultiple: true,
      type: FileType.image,
      // 强制获取文件字节数据，Web环境必须开启
      withData: true,
    );

    if (result != null) {
      setState(() {
        // 生成上传用的MultipartFile列表
        _uploadFiles = result.files.map((file) {
          return http.MultipartFile.fromBytes(
            'file',
            file.bytes as List<int>,
            filename: file.name,
          );
        }).toList();

        // 提取图片字节数据用于展示
        _imageBytesList = result.files
            .map((file) => file.bytes as Uint8List)
            .toList();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('选择并展示图片')),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: pickUploadFiles,
            child: const Text('选择多张图片'),
          ),
          Expanded(
            child: _imageBytesList.isEmpty
                ? const Center(child: Text('未选择图片'))
                : GridView.builder(
                    padding: const EdgeInsets.all(16),
                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      crossAxisSpacing: 12,
                      mainAxisSpacing: 12,
                    ),
                    itemCount: _imageBytesList.length,
                    itemBuilder: (context, index) {
                      return Column(
                        children: [
                          Expanded(
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(8),
                              child: Image.memory(
                                _imageBytesList[index],
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          const SizedBox(height: 8),
                          Text(
                            _uploadFiles[index].filename ?? '未知文件名',
                            style: const TextStyle(fontSize: 12),
                            overflow: TextOverflow.ellipsis,
                          ),
                        ],
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}

关键细节说明 #

• withData: true：必须开启该参数，确保FilePicker返回文件的字节数据，这是Web环境下获取图片内容的核心前提。
• Image.memory()：直接使用字节数据生成图片组件，完全适配Web环境，无需依赖本地文件路径。
• 状态更新：通过setState触发UI刷新，保证选中图片后能立即在界面上展示。

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