Swift中使用Alamofire实现Multipart带参图片上传返回502错误求助

问题原因与修复方案 #

1. 手动设置的请求头存在两处致命错误：
   • Content-lenth 拼写错误，正确拼写为Content-Length
   • 手动计算的Content-Length仅统计了图片数据大小，没有包含其他表单字段、multipart请求分隔符等内容，长度值完全错误
   • 手动设置的Content-type: multipart/form-data缺少必填的boundary分隔符参数，服务端无法正常解析请求体
     Alamofire的multipartFormData上传接口会自动生成正确的Content-Type和Content-Length头，不需要手动设置这两个字段，直接删除即可。
2. 原代码中存在多处强制解包逻辑，图片加载失败、数据转换失败都会导致App直接崩溃，建议增加安全校验。

修改后可运行代码 #

guard let testImage = UIImage(named: "sayHi"), let imageData = testImage.pngData() else {
    print("图片加载或转换失败")
    return
}

let headers: HTTPHeaders = [
    "Accept": "application/json",
]

AF.upload(
    multipartFormData: { multipartFormData in
        multipartFormData.append("10".data(using: .utf8)!, withName: "pickerId")
        multipartFormData.append("100".data(using: .utf8)!, withName: "walkerRfid")
        multipartFormData.append(imageData, withName: "photo" , fileName: "file.png", mimeType: "image/png")
    },
    to: "https://zb9.amazonaws.com/data/savePickerData", method: .post , headers: headers)
    .validate(statusCode: 200..<300)
    .response { resp in
        switch resp.result{
        case .failure(let error):
            print(error)
            // 打印完整响应内容排查服务端返回的具体错误
            if let data = resp.data, let errMsg = String(data: data, encoding: .utf8) {
                print("服务端返回错误详情：\(errMsg)")
            }
        case.success( _):
            print("🥶🥶Response after upload Img: \(resp.result)")
        }
    }

额外排查方向 #

如果修改后仍然返回502错误，按以下顺序排查：

• 确认接口要求的表单字段名、字段类型完全匹配，比如是否要求pickerId是数字类型而非字符串
• 确认接口有没有其他必填的请求头，比如鉴权token等
• 502属于网关类错误，也可以确认服务端接口本身是否正常运行，有没有限流、鉴权失败等情况

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