Flutter Web：从dart:js迁移到package:web处理Blob的问题解决

错误原因 #

你自定义的JsUint8List扩展类型试图以Dart的Uint8List作为表示类型实现JSArray<JSAny>，但Uint8List既不是JSArray底层表示类型的子类型，也不属于JSArray<JSAny>的子类型，因此触发类型错误。

正确实现方式 #

无需自定义扩展类型，直接借助dart:js_interop提供的工具完成Dart类型到JS类型的转换：

@JS()
library image;

import 'package:flutter/services.dart';
import 'package:web/web.dart';
import 'dart:js_interop';
import 'dart:convert';

@JS('setImage')
external JSPromise _setImage(Blob data); // 对应外部JS文件中的setImage函数

void setImage(String data) {
  // 解码base64字符串为Dart Uint8List
  final uint8List = Uint8List.fromList(base64Decode(data));
  // 将Dart Uint8List转换为JS兼容的Uint8Array（实现JSAny接口）
  final jsUint8Array = uint8List.toJS();
  // 创建Blob要求的JSArray<JSAny>类型参数
  final blobParts = JSArray<JSAny>.from([jsUint8Array]);
  
  final blob = Blob(blobParts, BlobPropertyBag(type: 'image/png'));
  _setImage(blob);
}

简化写法 #

如果不需要单独处理数组，也可以直接将转换后的JS数组放入JSArray构造：

void setImage(String data) {
  final uint8List = Uint8List.fromList(base64Decode(data));
  final blob = Blob(
    JSArray<JSAny>.from([uint8List.toJS()]),
    BlobPropertyBag(type: 'image/png')
  );
  _setImage(blob);
}

关键说明 #

• uint8List.toJS()是dart:js_interop为Uint8List提供的扩展方法，直接将Dart字节列表转换为JS端的Uint8Array（自动实现JSAny接口）。
• JSArray<JSAny>.from()用于将Dart的Iterable转换为JS端的数组，满足Blob构造函数对参数类型的要求。

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