Flutter Web上传PDF至Firebase Storage报错，求解决方案及可用代码

问题原因 #

Flutter Web环境不支持dart:io中的File类，且FirebaseStorage的putFile方法在Web端无法直接使用——因为Web中获取的文件路径是虚拟路径，无法映射到本地文件系统，必须通过二进制数据（Blob/字节数组）完成上传。

上传PDF到Firebase Storage的可行代码 #

假设你使用file_picker插件获取PDF文件（确保已在pubspec.yaml中添加依赖），以下是完整上传逻辑：

import 'package:firebase_storage/firebase_storage.dart';
import 'package:file_picker/file_picker.dart';

Future<String?> uploadPdfToStorage() async {
  // 选择PDF文件
  FilePickerResult? result = await FilePicker.platform.pickFiles(
    type: FileType.custom,
    allowedExtensions: ['pdf'],
  );

  if (result == null) return null;

  // 获取选中的XFile（Web端推荐用XFile而非File）
  XFile pdfFile = result.files.first;
  
  // 读取文件字节数据
  List<int> pdfBytes = await pdfFile.readAsBytes();
  
  // 定义Firebase Storage存储路径
  final storagePath = 'reports/${pdfFile.name}';
  final storageRef = FirebaseStorage.instance.ref().child(storagePath);

  // 上传字节数据到Storage
  UploadTask uploadTask = storageRef.putData(
    pdfBytes,
    SettableMetadata(contentType: 'application/pdf'), // 指定MIME类型
  );

  // 等待上传完成并获取下载URL
  TaskSnapshot snapshot = await uploadTask.whenComplete(() {});
  String downloadUrl = await snapshot.ref.getDownloadURL();
  
  return downloadUrl;
}

在Flutter Web中显示PDF #

可以通过以下两种方式实现：

方式1：使用WebView加载下载URL #

依赖webview_flutter插件（注意Web端需要额外配置）：

import 'package:webview_flutter/webview_flutter.dart';
// 确保Web端初始化（main函数中添加）
// WebView.platform = WebWebViewPlatform();

WebView(
  initialUrl: downloadUrl, // 传入之前获取的PDF下载URL
  javascriptMode: JavascriptMode.unrestricted,
)

方式2：使用HTML iframe嵌入 #

通过dart:html直接创建iframe（适合简单场景）：

import 'dart:html' as html;

// 在Widget中嵌入iframe
HtmlElementView(
  viewType: 'pdf-iframe',
  onPlatformViewCreated: (int id) {
    final iframe = html.IFrameElement()
      ..src = downloadUrl
      ..style.width = '100%'
      ..style.height = '600px'
      ..border = 'none';
    html.querySelector('#pdf-iframe-$id')?.append(iframe);
  },
)

内容的提问来源于stack exchange，提问作者Mariam Ashraf Abdel Rahman Ahm