Estoy tratando de cargar archivos con la solicitud axios.post con el siguiente código:
export const create = (data) => { api.post("/api/v1/redacao", { tema: data.tema }).then(postResponse => { const resp = api.patch("/api/v1/redacao/" + postResponse.data.redacao.id, { titulo: data.titulo, texto: data.conteudo }).then(patchResponse => { if (patchResponse.status === 200) { if (data.file) { const formData = new FormData(); formData.append('file', data.file) const config = { headers: { 'content-type': 'multipart/form-data' } } return api.post("/api/v1/redacao/uploadRedacao/" + postResponse.data.redacao.id, formData, config) } return false; } return null }) if (resp) { resp.then((response) => { console.log(response) }) } return false; }) }Pero cuando miro los datos de la carga útil en las herramientas de desarrollo de Chrome, la carga útil está vacía. Si uso la solicitud de publicación sin encadenar las solicitudes, funciona bien.
¿Alguien tiene idea de cuál es el problema con FormData?
Creé una API de llamada de módulo que crea una instancia de axios y la estaba usando porque los encabezados de autorización, baseUrls e interceptores. Importo los axios nuevamente y creo otra instancia para hacer esta solicitud específica y está funcionando ahora
export const create = (data) => { api.post("/api/v1/redacao", { tema: data.tema }).then(postResponse => { if (data.file) { let formData = new FormData() formData.append('file', data.file) buildUploadFileHeader().then(headers => { axios.post(REACT_APP_BACKEND_URL + '/api/v1/redacao/uploadRedacao/' + postResponse.data.redacao.id, formData, { headers }).then(uploadResponse => { if (uploadResponse.status === 201) { return false } }) }) } else { api.patch("/api/v1/redacao/" + postResponse.data.redacao.id, { titulo: data.titulo, texto: data.conteudo }).then(patchResponse => { if (patchResponse.status === 200) { return false; } return null }) } return true; })}