Flutter中如何将Drop zone包返回的Html.File转换为Uint8List或Io.File

注意：dart:io 包仅支持Android、iOS、桌面等原生Flutter平台，Web环境下无法使用Io.File类型，因此优先转换为Uint8List格式即可满足文件上传需求。

核心转换方法 #

• 使用dart:html自带的FileReader异步读取Html.File为Uint8List

import 'dart:async';
import 'dart:html' as html;
import 'dart:typed_data';

Future<Uint8List> htmlFileToUint8List(html.File htmlFile) async {
  final completer = Completer<Uint8List>();
  final reader = html.FileReader();
  
  reader.onLoadEnd.listen((_) {
    completer.complete(reader.result as Uint8List);
  });
  
  reader.onError.listen((err) {
    completer.completeError(err);
  });
  
  reader.readAsArrayBuffer(htmlFile);
  return completer.future;
}

上传使用示例（以Dio为例） #

转换得到的Uint8List可以直接用于构造上传表单，无需额外转成文件对象：

import 'package:dio/dio.dart';

// 1. 调用转换方法获取二进制数据，dropZoneReturnedFile为拖放组件返回的Html.File对象
final Uint8List fileBytes = await htmlFileToUint8List(dropZoneReturnedFile);
// 2. 构造Multipart表单
final FormData formData = FormData.fromMap({
  "file": MultipartFile.fromBytes(
    fileBytes,
    filename: dropZoneReturnedFile.name, // 直接读取Html.File自带的文件名属性
  ),
  // 可添加其他自定义请求参数
});
// 3. 发起上传请求
final response = await Dio().post("你的上传接口地址", data: formData);

多平台兼容可选方案 #

如果你的项目需要同时兼容Web和原生平台的文件处理逻辑，可以引入universal_io包，用转换得到的Uint8List构造跨平台通用的File对象：

import 'package:universal_io/io.dart';

final File platformFile = File.fromRawPath(fileBytes);
// 注意：Web环境下该对象仅支持读取二进制内容、上传，无法调用路径相关的原生API

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