Debajo del código, estoy agregando objetos a la matriz de medios en reactJS

const formData = new FormData()
formData.append('file', file, file.name)
const obj = {
  'id': id,
  'type': 'doc',
  'data': formData,
  url: file
};
setID(id + 1);
setMedia([...media, obj]);

Ahora lo envío a api a través de axios

function addNew() {
  setProgressing(true)
  axios.post(uri + '/api/add', {
      map_id: props.data.id,
      questions: JSON.stringify(media)
    })
    .then(res => {
      props.updateStep();
    })
    .catch(err => {

    });
}

Pero en el extremo del servidor recibo el objeto de la matriz como a continuación, vea los datos y la URL está vacía

{id: 1, type: "image", data: {{}}, url: {}}

Este es el encabezado de la solicitud

enter image description here

Código de SetMedia que llama a la carga de cada imagen

 function handleUploadChange(e) {
        handleClose();
        const file = e.target.files[0];
        if (!file) {
            return;
        }
        const reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = () => {
            const formData = new FormData()
            formData.append('file', file, file.name)

            const obj = { 'id': id, 'type': 'image', 'data': formData, url: file };
            setID(id+1);
            setMedia([...media, obj]);


        }


        reader.onerror = function () {
            console.log("error on load image");
        };
    }
0
Mubashir 9 oct. 2019 a las 14:20

1 respuesta

La mejor respuesta

Encuentro una solución para ello.

Convierto imágenes en base64 y envío una cadena en la solicitud y en el lado del servidor la convierto nuevamente en imágenes.

0
Mubashir 13 oct. 2019 a las 19:52