使用expo-image-picker多图上传至Flask后端时收到ImmutableMultiDict([])

核心原因分析 #

你遇到的问题大概率是手动设置Content-Type导致的。当使用fetch发送FormData时，Expo会自动生成包含boundary的multipart/form-data请求头，手动设置该头会丢失关键的boundary信息，导致Flask无法正确解析表单中的文件数据。此外，Expo环境下直接用Blob处理图片存在兼容性问题，改用File对象会更可靠。

解决方案 #

1. 修改客户端上传代码 #

移除手动设置的Content-Type头，调整图片转FormData的逻辑：

const onUpload = async () => {
  const data = new FormData();

  for (let index = 0; index < images.length; index++) {
    const image = images[index];
    // 从uri提取文件后缀
    const fileExtension = image.uri.split('.').pop();
    const fileName = `image${index}.${fileExtension}`;
    
    // 转换为File对象加入FormData
    const file = await fetch(image.uri)
      .then(res => res.blob())
      .then(blob => new File([blob], fileName, { type: image.mimeType }));
    
    data.append('images', file, fileName);
  }

  await fetch(serverUrl, {
    method: 'POST',
    body: data,
    // 移除手动设置的Content-Type，让fetch自动生成
  });
};

2. 调整Flask后端代码 #

添加批量文件获取逻辑和基础配置：

from flask import Flask, request, Response

app = Flask(__name__)
# 配置最大上传大小（示例为100MB，按需调整）
app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024

@app.route("/upload_image", methods=["POST"])
def upload_image():
    # 获取所有上传的图片文件
    uploaded_files = request.files.getlist('images')
    print(f"收到{len(uploaded_files)}张图片")
    
    # 遍历文件处理（示例：后续可添加S3上传逻辑）
    for file in uploaded_files:
        if file.filename != '':
            print(f"待处理文件: {file.filename}")
            # s3_client.upload_fileobj(file, '你的S3桶名', file.filename)
    
    return Response("图片上传成功", status=200)

额外检查点 #

• 确认serverUrl指向正确的Flask端点，跨域场景需用flask-cors配置CORS。
• 用Postman模拟multipart/form-data请求测试后端，排除后端本身问题。
• 确保Expo项目配置了相机和文件权限（app.json中添加）：

  {
    "expo": {
      "permissions": ["CAMERA", "MEDIA_LIBRARY"],
      "ios": {
        "infoPlist": {
          "NSCameraUsageDescription": "需要访问相机拍摄图片",
          "NSPhotoLibraryUsageDescription": "需要访问相册选择图片"
        }
      }
    }
  }
  

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