Flutter Web图片上传至Firebase Storage失败，请求代码调试帮助

以下是修复后的完整代码，解决了Flutter Web环境下无法上传图片到Firebase Storage的问题：

import 'dart:developer';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:get/get.dart';

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

  @override
  State<AddBlogPage> createState() => _AddBlogPageState();
}

class _AddBlogPageState extends State<AddBlogPage> {
  final titleTextController = TextEditingController();
  final descTextController = TextEditingController();
  String? imgUrl;
  Uint8List? _imageBytes;
  String? _imageName;
  final FirebaseStorage _storage = FirebaseStorage.instanceFor(bucket: 'your-bucket-url.appspot.com');

  Future<void> _pickImage(ImageSource source) async {
    final pickedFile = await ImagePicker().pickImage(
      source: source,
      maxWidth: 600,
      maxHeight: 600,
      imageQuality: 85,
    );

    if (pickedFile != null) {
      // 读取图片字节数据，适配Web环境
      final bytes = await pickedFile.readAsBytes();
      setState(() {
        _imageBytes = bytes;
        _imageName = pickedFile.name;
      });
    } else {
      log('No image selected.');
    }
  }

  Future<void> _uploadFile() async {
    if (_imageBytes == null || _imageName == null) return;

    try {
      // 创建唯一文件名，避免重复
      final fileName = 'blog/${DateTime.now().millisecondsSinceEpoch}_$_imageName';
      final storageRef = _storage.ref().child(fileName);
      
      // 上传字节数据
      final uploadTask = storageRef.putData(
        _imageBytes!,
        SettableMetadata(contentType: 'image/${_imageName!.split('.').last}'),
      );

      // 等待上传完成并获取下载URL
      final snapshot = await uploadTask.whenComplete(() => log('File uploaded'));
      final downloadUrl = await snapshot.ref.getDownloadURL();
      
      setState(() {
        imgUrl = downloadUrl;
      });
      log('Image URL: $downloadUrl');
    } on FirebaseException catch (e) {
      log('Upload error: ${e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: Get.height * 0.85,
      width: Get.width * 0.5,
      child: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          elevation: 0,
          backgroundColor: Colors.green,
          titleSpacing: 40,
          actions: [
            IconButton(
              onPressed: () => Navigator.pop(context),
              icon: const Icon(Icons.cancel_outlined, color: Colors.white, size: 34),
            ),
            const SizedBox(width: 10)
          ],
          title: const Text(
            "Create Blog",
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
          ),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Form(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Column(
                    children: [
                      ElevatedButton(
                        onPressed: () => _pickImage(ImageSource.gallery),
                        child: const Text('Select Image'),
                      ),
                      const SizedBox(height: 20),
                      _imageBytes == null
                          ? const Text('No image selected.', style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold))
                          : Text(
                              imgUrl == null 
                                  ? 'Image Selected. Now upload the image' 
                                  : 'Image uploaded successfully!',
                              style: const TextStyle(color: Colors.green, fontWeight: FontWeight.bold),
                            ),
                      const SizedBox(height: 20),
                      ElevatedButton(
                        onPressed: _imageBytes == null ? null : _uploadFile,
                        child: const Text('Upload Image'),
                      ),
                    ],
                  ),
                  const SizedBox(height: 15),
                  TextFormField(
                    maxLines: 2,
                    controller: titleTextController,
                    keyboardType: TextInputType.name,
                    decoration: const InputDecoration(
                      labelText: "Enter Blog Title",
                      labelStyle: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w600, color: Colors.grey),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.green, width: 2.0),
                        borderRadius: BorderRadius.all(Radius.circular(20.0)),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.lightGreenAccent, width: 2.0),
                        borderRadius: BorderRadius.all(Radius.circular(20.0)),
                      ),
                    ),
                  ),
                  const SizedBox(height: 10),
                  TextFormField(
                    maxLines: 10,
                    controller: descTextController,
                    keyboardType: TextInputType.name,
                    decoration: const InputDecoration(
                      labelText: "Enter Blog Description",
                      labelStyle: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w600, color: Colors.grey),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.green, width: 2.0),
                        borderRadius: BorderRadius.all(Radius.circular(20.0)),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.lightGreenAccent, width: 2.0),
                        borderRadius: BorderRadius.all(Radius.circular(20.0)),
                      ),
                    ),
                  ),
                  const SizedBox(height: 15),
                  ElevatedButton(
                    onPressed: imgUrl == null 
                        ? null 
                        : () async {
                            await FirebaseFirestore.instance.collection('blog').doc().set({
                              'image': imgUrl,
                              'title': titleTextController.text,
                              'description': descTextController.text,
                            });
                            Get.back();
                            log('Blog uploaded with image: $imgUrl');
                          },
                    child: const Text("Upload Blog"),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

关键修改说明 #

• 移除dart:io依赖：Flutter Web不支持dart:io的File类，改用Uint8List存储图片字节数据。
• 修改图片选择逻辑：调用pickedFile.readAsBytes()获取图片字节，同时保存文件名用于设置Content-Type。
• 调整上传逻辑：使用putData方法上传字节数据，上传完成后获取下载URL并赋值给imgUrl，确保后续可以提交到Firestore。
• 优化UI反馈：根据上传状态更新提示文本，禁用未准备好的按钮。

额外注意事项 #

确保你的Firebase Storage规则配置允许上传操作，示例规则（仅开发环境使用，生产环境需限制权限）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth == null; // 开发环境临时配置
    }
  }
}

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