Flutter Web端图片无法上传至服务器，求代码问题排查

问题描述 #

开发了适配Android与Web端的Flutter应用，Web端尝试上传图片至服务器时始终无法正常运行，以下是当前代码，需明确问题所在并修复：

final url = Uri.parse('$apiHeader/poststore');
String token = await getUserToken();

Map<String, String> headers = {
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Authorization': 'Bearer $token'
};

var request = http.MultipartRequest("POST", url);

request.headers.addAll(headers);

request.fields['category_id'] = model.categoryId;
request.fields['title'] = model.title;

// 疑问：这段Web端代码如何修正才能正常工作
if (kIsWeb) {
  final fileBytes =
      await model.image.readAsBytes(); // 转换为字节

  var multipartFile = http.MultipartFile.fromBytes(
      'fileName[]', fileBytes); // 将字节添加到multipart

  request.files.add(multipartFile);
} else {
  var multipartFile = await http.MultipartFile.fromPath(
      'fileName[]', model.image.path);

  request.files.add(multipartFile);
}

var response = await request.send();

代码中的核心问题 #

1. 手动设置错误的Content-Type头
   MultipartRequest会自动生成带boundary的multipart/form-data请求头，你手动设置的application/json会覆盖这个正确的头，导致服务器无法解析表单中的文件和字段数据。

2. Web端MultipartFile缺少关键参数
   使用fromBytes创建文件时，只传了字段名和字节数据，没有指定文件名和MIME类型，多数服务器需要这两个信息来正确识别和存储文件。

3. 可选检查：服务器字段名匹配
   确认服务器接口接收文件的字段名确实是fileName[]（数组格式），如果是单个文件，可能需要改为fileName。

修复后的代码 #

final url = Uri.parse('$apiHeader/poststore');
String token = await getUserToken();

// 移除Content-Type，MultipartRequest会自动生成正确的multipart/form-data头
Map<String, String> headers = {
  'Accept': 'application/json',
  'Authorization': 'Bearer $token'
};

var request = http.MultipartRequest("POST", url);
request.headers.addAll(headers);

request.fields['category_id'] = model.categoryId;
request.fields['title'] = model.title;

if (kIsWeb) {
  final fileBytes = await model.image.readAsBytes();
  // 补充文件名和MIME类型，Web端File对象自带name和type属性
  var multipartFile = http.MultipartFile.fromBytes(
    'fileName[]', 
    fileBytes,
    filename: model.image.name,
    contentType: MediaType.parse(model.image.type)
  );
  request.files.add(multipartFile);
} else {
  var multipartFile = await http.MultipartFile.fromPath(
    'fileName[]', 
    model.image.path,
    // 可选：自动识别图片MIME类型，也可手动指定
    contentType: MediaType('image', model.image.path.split('.').last)
  );
  request.files.add(multipartFile);
}

var response = await request.send();
// 可选：添加响应内容读取，方便调试
final responseBody = await response.stream.bytesToString();
print('服务器响应：$responseBody');

额外注意事项 #

• Web端需确认服务器已配置CORS，允许POST请求及multipart/form-data类型的内容，否则会出现跨域错误。
• 若服务器返回错误，可打印response.statusCode和responseBody定位具体问题，比如字段不匹配、权限不足等。

内容的提问来源于stack exchange，提问作者IKRAM UL HAQ