Flutter应用向FastAPI服务器传图片报Error 422问题求解

常见问题排查与修复 #

1. 核对Multipart字段名与FastAPI接口参数名 #

FastAPI的文件上传接口中，UploadFile对应的参数名必须和Flutter代码中MultipartFile的键完全一致。比如FastAPI代码如果是：

from fastapi import FastAPI, File, UploadFile

app = FastAPI()

@app.post("/upload-image/")
async def upload_image(file: UploadFile = File(...)):
    return {"filename": file.filename}

那么Flutter里的键必须是'file'，而不是'image'——这是触发422错误最常见的原因。

2. 显式指定图片的MIME类型 #

Flutter的MultipartFile.fromPath有时无法自动识别正确的文件类型，手动设置可避免格式不匹配：

var image = await http.MultipartFile.fromPath(
  'image', // 确保和FastAPI参数名一致
  imageFile.path,
  contentType: MediaType('image', 'jpeg'), // 图片是png就改成'png'
);

3. 打印完整响应体定位具体错误 #

FastAPI返回422时会附带详细的错误描述，在Flutter中获取响应体即可精准排查：

var response = await request.send();
var responseBody = await response.stream.bytesToString();
print('Error Details: $responseBody');

比如响应体提示"msg": "field required"，就说明字段名不匹配；提示"msg": "invalid media type"，就说明MIME类型错误。

4. 添加必要请求头 #

部分FastAPI接口可能要求指定Accept头，可手动添加：

request.headers['Accept'] = 'application/json';

替代方案：使用Dio库实现上传 #

如果http库的配置问题难以排查，可切换到Dio库，它会自动处理更多请求细节：

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

dependencies:
  dio: ^5.4.0+1

2. 替换上传代码：

import 'package:dio/dio.dart';
import 'package:path/path.dart';

Future<void> _sendImageToServer(File imageFile, String url) async {
  try {
    final dio = Dio();
    final formData = FormData.fromMap({
      'image': await MultipartFile.fromFile(
        imageFile.path,
        filename: basename(imageFile.path),
        contentType: MediaType('image', 'jpeg'),
      ),
    });
    final response = await dio.post(url, data: formData);
    
    if (response.statusCode == 200) {
      print('Image uploaded successfully');
    } else {
      print('Failed: ${response.statusMessage} - ${response.data}');
    }
  } catch (e) {
    print('Upload error: $e');
  }
}

内容的提问来源于stack exchange，提问作者Joel Biju