Flutter Web中image_picker插件抛出‘On web `bytes` is required’异常的解决方法

• 问题本质：AppWrite Web SDK要求上传文件时必须传入bytes参数，而image_picker_for_web默认返回的XFile仅包含文件的Object URL，没有预加载文件字节数据。Android端正常是因为原生平台的XFile支持直接读取bytes。

• 解决步骤：

  1. 获取文件时拿到原始的html.File对象（而非仅依赖XFile）
  2. 使用FileReader读取该文件的字节数据
  3. 将读取到的bytes传入AppWrite的InputFile

• 具体代码实现：
  先导入Web相关依赖包：

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

  然后修改文件选择与上传逻辑：

  Future<void> uploadProfilePic() async {
    // 调用image_picker选择图片
    final picker = ImagePicker();
    final XFile? xFile = await picker.pickImage(source: ImageSource.gallery);
    if (xFile == null) return;
  
    // 获取Web端原始文件对象
    final html.File? webFile = html.window.document.querySelector('input[type="file"]')?.files?.first;
    if (webFile == null) return;
  
    // 读取文件字节数据
    final reader = html.FileReader();
    reader.readAsArrayBuffer(webFile);
    await reader.onLoad.first;
    final Uint8List bytes = reader.result as Uint8List;
  
    // 构造符合AppWrite要求的InputFile
    final inputFile = InputFile(
      bytes: bytes,
      filename: xFile.name,
      mimeType: xFile.mimeType,
    );
  
    // 调用AppWrite上传接口
    await databases.createDocument(
      databaseId: '你的数据库ID',
      collectionId: '你的集合ID',
      documentId: '你的文档ID',
      data: {'avatar': inputFile},
    );
  }
  

• 更可靠的文件获取方式：
  避免通过DOM查询获取文件，直接监听文件选择事件：

  Future<void> uploadProfilePic() async {
    // 创建Web端文件选择控件
    html.FileUploadInputElement uploadInput = html.FileUploadInputElement()
      ..accept = 'image/*';
    uploadInput.click();
  
    // 等待用户选择文件
    await uploadInput.onChange.first;
    final html.File webFile = uploadInput.files!.first;
  
    // 读取字节数据（同上面的步骤）
    final reader = html.FileReader();
    reader.readAsArrayBuffer(webFile);
    await reader.onLoad.first;
    final Uint8List bytes = reader.result as Uint8List;
  
    // 构造InputFile并上传（同上面的步骤）
    final inputFile = InputFile(
      bytes: bytes,
      filename: webFile.name,
      mimeType: webFile.type,
    );
  
    await databases.createDocument(
      databaseId: '你的数据库ID',
      collectionId: '你的集合ID',
      documentId: '你的文档ID',
      data: {'avatar': inputFile},
    );
  }
  

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