Flutter Web端FilePicker选大文件时file.bytes为null问题求助

问题原因 #

当前代码用withData: true把文件完整加载到内存，4GB视频远超出浏览器内存上限，导致无法读取全量字节数据，最终file.bytes返回null。

解决方案：改用流式上传 #

避免将大文件全部读入内存，直接利用浏览器原生文件流（Blob）上传，调整代码如下：

FilePickerResult? picked = await FilePicker.platform
    .pickFiles(
        allowMultiple: true,
        type: FileType.custom,
        allowedExtensions: ['mp4', 'avi', 'MP4'],
        // 大文件禁用内存加载，改用文件流/原生文件对象
        withData: false,
        withReadStream: true,
    );

if (picked != null) {
    for (var file in picked.files) {
        // Web端获取原生File(Blob)对象
        if (file.webFile != null) {
            Reference ref = FirebaseStorage.instance.ref()
                .child('data')
                .child(file.name);

            final metadata = SettableMetadata(contentType: 'video/mp4');
            // 用putBlob流式上传，不占用大量内存
            UploadTask uploadTask = ref.putBlob(file.webFile!, metadata);
            
            // 可选：监听上传进度
            uploadTask.snapshotEvents.listen((TaskSnapshot snapshot) {
                double progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                print('上传进度: ${progress.toStringAsFixed(2)}%');
            }).onError((error) {
                print('上传失败: $error');
            });
        }
    }
}

关键说明 #

• 内存友好：putBlob直接调用浏览器文件流上传，不会把4GB视频全量加载到内存，彻底解决内存溢出问题。
• Web端适配：webFile是FilePicker专为Web环境提供的属性，确保仅在Web场景下使用即可（跨平台项目可添加平台判断）。
• 用户体验优化：通过snapshotEvents实时获取上传进度，能给用户更直观的反馈。
• 异常处理：务必处理上传过程中的异常，比如网络波动、存储权限受限等情况。

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