Flutter Web使用file_picker包发布后path始终为null问题求助

Flutter Web受浏览器沙箱安全策略限制，不允许前端代码获取本地文件的真实物理路径，file_picker 4.2.0版本在html渲染器的release模式下，path字段会固定返回null，你当前代码直接依赖file.path生成File对象、存储路径的逻辑本身不符合Web端的运行规则。

适配Web端需要放弃使用path字段，改用PlatformFile提供的字节流/字节数组处理文件逻辑，两种常见场景的处理方式如下：

• 上传文件到后端：无需构造File对象读取路径，直接使用PlatformFile的bytes字段或已开启的readStream构造上传请求即可
• Web端本地预览文件：图片类资源直接用Image.memory(file.bytes)渲染，PDF类资源使用支持内存字节流的Web端渲染组件处理即可

首先需要导入Flutter基础库获取平台判断常量：

import 'package:flutter/foundation.dart';

修改后的文件选择逻辑：

Future getFile() async {    
    FilePickerResult? result = await FilePicker.platform.pickFiles(
      withReadStream: true,
      withData: true, // Web端需开启该配置才会返回bytes字段
      type: FileType.custom,
      allowedExtensions: ['png', 'jpeg', 'jpg', 'pdf'],
    );
    if (result != null) {
      PlatformFile file = result.files.single;
      setState(() {
        // 增加平台分支判断，同时兼容移动端/桌面端和Web端
        if(kIsWeb){
          // Web端存储文件字节和文件名即可
          _fileBytes = file.bytes;
          _fileName = file.name;
        }else{
          // 非Web端保留原有path逻辑
          _file = File(file.path.toString());
          _filePath = file.path;
        }
      });
      _uploadFile();
    } else {
      // 文件未选择
    }
  }

同步调整上传逻辑，比如使用dio上传时的表单构造示例：

Future _uploadFile() async {
  var formData = FormData();
  if(kIsWeb){
    formData.files.add(MapEntry(
      'file', 
      MultipartFile.fromBytes(_fileBytes!, filename: _fileName)
    ));
  }else{
    formData.files.add(MapEntry(
      'file', 
      await MultipartFile.fromFile(_filePath, filename: _filePath.split('/').last)
    ));
  }
  // 剩余上传请求逻辑不变
}

注意：如果不需要兼容非Web端，可以直接移除所有path相关的逻辑，全程使用字节流处理即可。

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