Flutter Web使用HTTP与图片选择器上传图片至后端失败求助

核心问题分析 #

你遇到的错误是因为http包中的MultipartFile在Flutter Web环境下不支持，报错提示明确说明该类仅支持Android、iOS和MacOS平台。

修复方案 #

方案一：使用浏览器原生FormData API实现上传 #

直接利用Web环境的FormData API处理文件上传，这是Flutter Web下最稳定的原生实现方式：

import 'dart:html' as html;

uploadImage() async {
  var url = Uri.parse('${xyz}/api/v1/listing/store');
  
  // 创建Web原生FormData对象
  html.FormData formData = html.FormData();
  
  // 填充表单字段
  formData.append('name', titleTEC.text.toString());
  formData.append('category_id', selectedCategoryId.toString());
  formData.append('price', priceTEC.text.toString());
  formData.append('discount', '2');
  formData.append('discount_type', 'percent');
  
  // 添加图片文件（singleImage需为html.File类型，从文件选择器获取）
  formData.appendBlob('image', singleImage, '${DateTime.now().toString()}.png');
  
  // 发送请求
  try {
    html.HttpRequest request = await html.HttpRequest.request(
      url.toString(),
      method: 'POST',
      sendData: formData,
      requestHeaders: {'moduleId': '2'},
    );
    
    print('状态码: ${request.status}');
    print('响应内容: ${request.responseText}');
  } catch (e) {
    print('上传失败: $e');
  }
}

配套的图片选择代码（适配Web）：

import 'package:file_picker/file_picker.dart';
import 'dart:html' as html;

Future<html.File?> pickImage() async {
  FilePickerResult? result = await FilePicker.platform.pickFiles(type: FileType.image);
  if (result != null) {
    return html.File(result.files.single.bytes!, result.files.single.name);
  }
  return null;
}

方案二：使用dio库（跨平台统一实现） #

dio库对Flutter Web的文件上传支持更友好，无需区分平台，代码更简洁：

1. 先在pubspec.yaml添加依赖：

dependencies:
  dio: ^5.0.0

2. 上传实现代码：

import 'package:dio/dio.dart';

uploadImage() async {
  var url = '${xyz}/api/v1/listing/store';
  Dio dio = Dio();
  
  try {
    FormData formData = FormData.fromMap({
      'name': titleTEC.text.toString(),
      'category_id': selectedCategoryId.toString(),
      'price': priceTEC.text.toString(),
      'discount': '2',
      'discount_type': 'percent',
      // 若通过字节数组获取图片，用fromBytes；若有文件路径用fromFile
      'image': MultipartFile.fromBytes(
        await singleImage.readAsBytes(),
        filename: '${DateTime.now().toString()}.png',
      ),
    });
    
    Response response = await dio.post(
      url,
      data: formData,
      options: Options(headers: {'moduleId': '2'}),
    );
    
    print('状态码: ${response.statusCode}');
    print('响应内容: ${response.data}');
  } catch (e) {
    print('上传异常: $e');
  }
}

额外注意事项 #

• CORS跨域配置：必须确保后端服务器配置了正确的跨域策略，允许你的Flutter Web域名发起POST请求，同时允许multipart/form-data类型和自定义头moduleId。
• 文件选择器兼容性：使用支持Web平台的文件选择器包（如file_picker），避免使用仅适配移动端的选择器工具。

内容的提问来源于stack exchange，提问作者Muhammad Abdullah