Previsualizar el cuerpo multipart/form-data en HTTP

Este mini artículo muestra cómo inspeccionar y previsualizar la solicitud y la respuesta multipart/form-data.

1. ¿Qué es multipart/form-data?

Si trabajas en una función de subida de archivos, lo más probable es que uses una solicitud POST con Content-Type igual a multipart/form-data.

Multipart/form-data es un tipo especial de cuerpo en el que cada valor se envía como un bloque de datos. Cada parte se separa mediante un delimitador definido, que también se llama boundary. El nombre de cada campo se indica en el encabezado Content-Disposition de cada parte.

Con multipart/form-data puedes:

• Enviar uno o varios archivos a tu servidor.
• Enviar un par clave-valor

Cómo crear un multipart/form-data

Alamofire

Alamofire incluye una función integrada para subir multipart/form-data. El siguiente código muestra cómo subir una imagen y su nombre de archivo al servidor httpbin.org.

let fileName = "image.png"
let imageData = Data() // Data of UIImage
AF.upload(multipartFormData: { multipartFormData in
    multipartFormData.append(Data(fileName.utf8), withName: "fileName")
    multipartFormData.append(imageData, withName: "file")
}, to: "https://httpbin.org/post")
    .responseDecodable(of: HTTPBinResponse.self) { response in
        debugPrint(response)
    }

URLSession

Subir un multipart/form-data con URLSession resulta bastante complicado. El siguiente código muestra cómo usar URLSession para enviar un multipart/form-data a httpbin.org.

let fileData: Data = // Data of UIImage
let fileName = "image.png"
let boundary = UUID().uuidString

// Initialize the request
var request = URLRequest(url: URL(string: "https://httpbin.org/post")!)
request.httpMethod = "POST"

// Set multipart/form-data as a Content-Type
// Set boundary
request.setValue("multipart/form-data; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")

// Create a part
let data = NSMutableData()
data.appendString("--\(boundary)\r\n")
data.appendString("Content-Disposition: form-data; name=\"\(fieldName)\"; filename=\"\(fileName)\"\r\n")
data.appendString("Content-Type: \(mimeType)\r\n\r\n")
data.append(fileData)
data.appendString("\r\n")

// Set as a body
request.httpBody = httpBody as Data

// Make a request
URLSession.shared.dataTask(with: request) { data, response, error in
  // Complete
}.resume()

2. Cómo previsualizarlo con Proxyman

Afortunadamente, Proxyman incluye de serie un previsualizador de multipart/form-data. Eso significa que no hace falta configurar nada.

Proxyman mostrará una pestaña de vista previa si el Content-Type es multipart/form-data.

Exportar cada parte de multipart/form-data a un archivo

También puedes exportar el archivo de datos de cada parte multipart y guardarlo en tu equipo.

Es práctico para previsualizar lo que subimos desde nuestra app de iOS y detectar posibles errores.

Qué revisar cuando falla una subida

Comprueba que el boundary del encabezado Content-Type coincida con los separadores del cuerpo. Después, revisa el nombre de cada campo, el nombre de cada archivo y el tipo de contenido de cada parte. Un servidor puede aceptar la solicitud pero ignorar una parte cuyo nombre sea incorrecto. Las subidas suelen contener archivos personales o valores de formularios, así que guarda o comparte una parte exportada solo cuando sepas que es segura.

Proxyman es una app de macOS de alto rendimiento que permite a los desarrolladores capturar el tráfico HTTPS en dispositivos iOS, en el simulador de iOS y en dispositivos Android.

Descárgala en https://proxyman.com