Flutter Web中FilePicker路径为null时上传文件至Node/Express服务

核心原因 #

Flutter Web运行在浏览器沙箱环境中，受安全策略限制，无法获取用户本地文件的真实绝对路径，因此FilePicker返回结果的path字段为null是预期正常行为，不能照搬移动端/桌面端通过文件路径读取内容构造Multipart请求的逻辑。

具体实现步骤 #

• 1. 选文件时开启字节读取配置
     调用FilePicker时必须传入withData: true参数，选文件后会直接将文件内容以字节数组形式返回，无需依赖路径读取：

final FilePickerResult? pickResult = await FilePicker.platform.pickFiles(
  // 按业务需求限定文件类型
  type: FileType.image,
  allowedExtensions: ['jpg', 'png', 'jpeg'],
  withData: true, // Web环境必填，直接获取文件字节
);

• 2. 直接用字节构造MultipartFile
     拿到选文件结果后，不要使用MultipartFile.fromPath()方法，改用fromBytes()方法构造上传用的文件对象，文件名直接从选文件结果中获取即可：

if (pickResult != null) {
  PlatformFile selectedFile = pickResult.files.single;
  MultipartFile uploadFile = MultipartFile.fromBytes(
    selectedFile.bytes!,
    filename: selectedFile.name,
    // 可选：指定文件Content-Type，例：MediaType.parse('image/png')
  );

  // 组装FormData
  FormData uploadForm = FormData.fromMap({
    "upload_file": uploadFile,
    // 其余业务参数正常追加即可，例如"biz_id": "1001"
  });
}

• 3. 发送上传请求
     以常用的dio请求库为例，上传逻辑和非Web环境完全一致：

final Dio dio = Dio();
final resp = await dio.post(
  "你的Node.js/Express服务端上传地址",
  data: uploadForm,
  onSendProgress: (sentBytes, totalBytes) {
    // 可选：实现上传进度展示逻辑
  },
);

服务端适配说明 #

Node.js/Express端无需做特殊兼容，使用常规的multer等Multipart解析中间件即可正常接收文件，上传请求格式和移动端/桌面端发出的请求完全一致。

注意：不要尝试在Flutter Web中通过字节生成临时文件再走路径构造MultipartFile，Web环境无本地文件系统写入权限，该操作会直接抛出权限错误，直接使用字节构造是官方推荐的兼容写法。

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