Flutter Web端文件上传API报错：Null不是InstanceRef的子类型

错误原因 #

这个异常出在reader.result as List<int>的强制类型转换环节：Web环境下FileReader读取ArrayBuffer后，result的实际类型是ByteBuffer而非直接的List<int>，且如果文件读取失败（比如文件损坏、读取中断），result会返回null，强行类型转换就会触发该错误。

修复方案 #

推荐直接使用html.File自带的readAsBytes()方法简化文件读取逻辑，该方法会返回Future<Uint8List>，可以直接用于创建MultipartFile，同时避免手动处理FileReader的监听事件和类型转换问题。

修复后的完整代码：

uploadFiles() async {
  try {
    var token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1laWQiOiIyIiwibmJmIjoxNjc5MzgzMTY5LCJleHAiOjE2NzkzODQ5NjksImlhdCI6MTY3OTM4MzE2OX0.HL5Y39p0cxpbuOhbls-hjq2Nu_xnVGAJ4qacESp1yNw';
    var url = Uri.parse("my_url");
    var request = http.MultipartRequest('POST', url);
    Map<String, String> headers = {
      "Authorization": "Bearer $token",
      // 注意：无需手动设置multipart/form-data头，MultipartRequest会自动生成带boundary的正确请求头
    };
    request.headers.addAll(headers);

    request.fields.addAll({"facility_id": "46", "module_id": "3263", "id": "1"});

    for (var file in files) {
      // 直接读取文件字节
      Uint8List fileBytes = await file.readAsBytes();
      var multipartFile = http.MultipartFile.fromBytes(
        'file',
        fileBytes,
        filename: file.name,
      );
      request.files.add(multipartFile);
    }

    var response = await request.send();
    print(response.statusCode == 200 ? 'Upload successful' : 'Upload failed');
  } catch (e) {
    print(e);
  }
}

额外提示 #

如果一定要保留原有的FileReader逻辑，需要修正类型转换逻辑并增加非空判断：

reader.onLoadEnd.listen((event) {
  if (!_isCompleted) {
    _isCompleted = true;
    if (reader.result != null) {
      // 将ArrayBuffer转为Uint8List再转List<int>
      Uint8List bytes = Uint8List.view(reader.result as ByteBuffer);
      completer.complete(bytes.toList());
    } else {
      completer.completeError('文件读取失败');
    }
  }
});

内容的提问来源于stack exchange，提问作者who-aditya-nawandar