0
858
Vistassolicitud de publicación de axios para enviar datos de formulario
La solicitud POST de axios está accediendo a la url en el controlador pero configurando valores nulos en mi clase POJO, cuando reviso las herramientas de desarrollador en Chrome, la carga útil contiene datos. ¿Qué estoy haciendo mal?
Solicitud POST de Axios:
var body = { userName: 'Fred', userEmail: 'Flintstone@gmail.com' } axios({ method: 'post', url: '/addUser', data: body }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });Respuesta del navegador:
Si configuro encabezados como:
headers:{ Content-Type:'multipart/form-data' }La solicitud arroja el error.
Error al publicar multipart/form-data. Falta el límite del encabezado de tipo de contenido
Si hago la misma solicitud en cartero, funciona bien y establece valores en mi clase POJO.
¿Alguien puede explicar cómo establecer un límite o cómo puedo enviar datos de formulario usando axios?
3 Respuestas
Responde la pregunta0
Puede publicar datos de axios usando FormData() como:
var bodyFormData = new FormData();Y luego agregue los campos al formulario que desea enviar:
bodyFormData.append('userName', 'Fred'); Si está cargando imágenes, es posible que desee utilizar .append
bodyFormData.append('image', imageFile);Y luego puede usar el método de publicación de axios (puede modificarlo en consecuencia)
axios({ method: "post", url: "myurl", data: bodyFormData, headers: { "Content-Type": "multipart/form-data" }, }) .then(function (response) { //handle success console.log(response); }) .catch(function (response) { //handle error console.log(response); });Problema de GitHub relacionado:
No se puede obtener un .post con 'Content-Type': 'multipart/form-data' para trabajar @ axios/axios
0
En mi caso, tuve que agregar el límite al encabezado de la siguiente manera:
const form = new FormData(); form.append(item.name, fs.createReadStream(pathToFile)); const response = await axios({ method: 'post', url: 'http://www.yourserver.com/upload', data: form, headers: { 'Content-Type': `multipart/form-data; boundary=${form._boundary}`, }, });Esta solución también es útil si está trabajando con React Native.