Flutter Web端上传文件至Firebase Storage失败求助

原代码存在的核心问题 #

• 文件选择逻辑冗余：selectTestFile 中 if (result == null) result; 无实际作用，未终止后续流程，可能导致空值异常
• Web 环境不支持 dart:io 的 File 类：Flutter Web 中获取的文件路径是浏览器虚拟路径，无法通过 File(testFile!.path!) 实例化本地文件对象
• 空安全校验缺失：上传时直接用 ! 强制解包 testFile，未选文件点击上传会触发空指针异常
• 无上传状态与异常处理：未等待上传完成、未捕获异常，无法得知上传是否成功

修复后的完整代码 #

import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'dart:typed_data';

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

  @override
  State<TestUploadToStorage> createState() => _TestUploadToStorageState();
}

class _TestUploadToStorageState extends State<TestUploadToStorage> {
  PlatformFile? testFile;
  bool isUploading = false;

  Future selectTestFile() async {
    final result = await FilePicker.platform.pickFiles(
      withData: true, // Web环境必须开启，直接获取文件字节数据
    );
    if (result == null) return; // 无文件选择时直接终止流程
    setState(() {
      testFile = result.files.first;
    });
  }

  Future uploadTestFile() async {
    // 先校验是否已选择文件
    if (testFile == null) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('请先选择文件')),
      );
      return;
    }

    setState(() => isUploading = true);

    try {
      final storagePath = "TESTFILE/${testFile!.name}";
      final storageRef = FirebaseStorage.instance.ref().child(storagePath);

      // Web环境使用putData上传字节数据，替代putFile
      final uploadTask = storageRef.putData(testFile!.bytes!);
      
      // 等待上传完成并给出反馈
      await uploadTask.whenComplete(() {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('上传成功')),
        );
      });
    } catch (e) {
      // 捕获上传异常并提示用户
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('上传失败：$e')),
      );
    } finally {
      setState(() => isUploading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (testFile != null)
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text('已选择：${testFile!.name}'),
              ),
            const SizedBox(height: 20),
            TextButton(
              onPressed: selectTestFile,
              child: const Text("选择测试文件"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: isUploading ? null : uploadTestFile,
              child: isUploading
                  ? const CircularProgressIndicator(size: 20)
                  : const Text("测试上传"),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

1. 适配Web文件读取：开启 withData: true 直接获取文件字节数据，避免依赖Web不支持的本地文件路径
2. 替换上传方法：用 putData 替代 putFile，适配Web环境的文件上传逻辑
3. 完善空安全与状态管理：添加文件选择校验，增加上传加载状态防止重复点击
4. 增加用户反馈：通过SnackBar提示文件选择、上传成功/失败状态，捕获异常并展示错误信息

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