Flutter Web中如何将XFile图像上传至Firebase Storage并解决文件损坏问题

问题根因 #

1. Blob构造参数错误：html.Blob()接收的参数是包含Uint8List的数组，你直接传入profileImageFile（Uint8List类型）会导致二进制数据被错误拆分，生成的Blob本身就是损坏的。
2. 内容类型硬编码风险：固定写死contentType: 'image/png'，如果用户选择的是JPG、WebP等其他格式的图片，元数据和实际文件格式不匹配，也会触发解码失败。
3. 冗余依赖引入：无需额外引入universal_html，firebase_storage和XFile本身已经对Web端做了适配，可直接实现多端统一上传逻辑。

解决方案 #

方案1：多端通用写法（推荐，无需手动判断平台） #

try {
  final fbSorage.SettableMetadata metadata = fbSorage.SettableMetadata(
    contentType: _profileImage.mimeType, // 自动读取选中文件的实际格式
  );
  // 内部已自动适配Web/移动端的上传逻辑
  await ref.putFile(
    File(_profileImage.path),
    metadata,
  );
} on Exception catch (e) {
  print(e);
  return;
}

方案2：分端兼容写法（适配低版本依赖） #

如果方案1在你的依赖版本下存在兼容问题，可使用分端实现：

import 'dart:html' as html;
import 'package:flutter/foundation.dart';

// ...其他逻辑
final profileImageFile = await _profileImage.readAsBytes();
try {
  final fbSorage.SettableMetadata metadata = fbSorage.SettableMetadata(
    contentType: _profileImage.mimeType,
  );
  if (kIsWeb) {
    await ref
        .putBlob(
          html.Blob([profileImageFile]), // Uint8List需包裹在数组内传入
          metadata,
        );
  } else {
    await ref
        .putData(
          profileImageFile,
          metadata,
        );
  }
} on Exception catch (e) {
  print(e);
  return;
}

注意事项 #

• 选择图片时建议限定资源类型，避免选中非图片文件导致解码异常：

final XFile? pickedImage = await ImagePicker().pickImage(
  source: ImageSource.gallery,
  imageQuality: 80, // 可自定义压缩比例，减少上传体积
);

• 上传完成后直接使用Firebase Storage返回的官方下载链接即可，不要自行拼接格式转换参数。

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