如何在Flutter WASM Web应用中用package:web读取web.File内容

要实现_readFileAsBytes方法，你可以利用浏览器原生的FileReader API（对应package:web中的web.FileReader），将异步读取操作封装为Dart Future，具体实现如下：

首先补充必要的导入：

import 'dart:typed_data';
import 'dart:js_interop';
import 'package:web/web.dart' as web;

然后实现_readFileAsBytes方法：

Future<Uint8List> _readFileAsBytes(web.File file) async {
  final reader = web.FileReader();
  final completer = Completer<Uint8List>();

  reader.onloadend = (web.Event event) {
    // 读取完成后，将ArrayBuffer转换为Uint8List
    final arrayBuffer = reader.result as web.ArrayBuffer;
    completer.complete(Uint8List.view(arrayBuffer));
  }.toJS;

  reader.onerror = (web.Event event) {
    // 处理读取错误
    completer.completeError(Exception('文件读取失败: ${reader.error?.message}'));
  }.toJS;

  // 以ArrayBuffer格式读取文件
  reader.readAsArrayBuffer(file);

  return completer.future;
}

关键说明： #

• FileReader API：package:web中的web.FileReader与浏览器原生FileReader完全对应，通过readAsArrayBuffer方法读取文件原始字节数据
• 异步封装：使用Completer将浏览器的事件回调转换为Dart Future，符合Flutter的异步编程习惯
• 类型转换：读取结果为ArrayBuffer，通过Uint8List.view()转换为Dart可直接使用的Uint8List
• 错误处理：监听onerror事件捕获读取异常，避免程序崩溃

完整的UploadingStateFile类代码：

import 'dart:js_interop';
import 'dart:typed_data';
import 'package:http/http.dart' as http;
import 'package:web/web.dart' as web;

class UploadingStateFile {
  final web.File file;
  final int orderId;

  UploadingStateFile(this.file, this.orderId);

  Future<String> uploadFile() async {
    String type = file.type;
    type = type.isEmpty ? 'application/octet-stream' : type;

    final jsonResponse = await S3Calls.getPresignedUrlAttachments(type, orderId, file.name);
    final presignedUrl = jsonResponse["presigned_url"];
    final url = jsonResponse["url"];
    final bytes = await _readFileAsBytes(file);

    final response = await http.put(
      Uri.parse(presignedUrl),
      body: bytes,
      headers: {'Content-Type': type},
    );

    if (response.statusCode >= 200 && response.statusCode < 300) return url;
    throw Exception('Upload failed: ${response.statusCode} - ${response.body}');
  }

  Future<Uint8List> _readFileAsBytes(web.File file) async {
    final reader = web.FileReader();
    final completer = Completer<Uint8List>();

    reader.onloadend = (web.Event event) {
      final arrayBuffer = reader.result as web.ArrayBuffer;
      completer.complete(Uint8List.view(arrayBuffer));
    }.toJS;

    reader.onerror = (web.Event event) {
      completer.completeError(Exception('文件读取失败: ${reader.error?.message}'));
    }.toJS;

    reader.readAsArrayBuffer(file);

    return completer.future;
  }
}

内容的提问来源于stack exchange，提问作者Jovany González