Home > Blockchain >  Error send image b64 React Native to Node JS
Error send image b64 React Native to Node JS

Time:05-23

I can't send the image React Native to Node JS I get error, the image has a very long text Code React Native

async function postData(url = '', data = {}) {
    // Opciones por defecto estan marcadas con un *
    try {
        const response = await fetch(urlBase url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, *cors, same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
            Accept: "application/json",
            'Content-Type': 'application/json'
            //'Content-type': 'multipart/form-data'
            // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
        body: JSON.stringify(data) // body data type must match "Content-Type" header
        });
        console.log(response.text());
        return response.json(); // parses JSON response into native JavaScript objects
    } catch (error) {
        console.log("Error en peticion POST : " error);
        alert("Error en peticion POST : " error);
    }
        
}

Code Server Node JS in vercel In this code i try to increase the limit in post but i can't.

const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const app = express();
const obtenerDatos = require('./controlador/obtenerDatos');
const multer = require('multer');//Middleware para imagenes

app.use(cors());//Para intercambiar recursos entre cliente y servidor, el argumento no es obligacion

app.use(express.json());//Para los JSON
//app.use(bodyParser.urlencoded({ extended : true }));//para enviar los formularios al servidor
// Add this code for maximun 150mb 
app.use(bodyParser.json({limit: 10000}));
const options = {
  inflate: true,
  limit: 100000,
  defaultCharset: 'utf-8'
};
//app.use(bodyParser.text(options));
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  inflate: true,
  limit: 100000,
  extended: true
})); 
//Invocaciones rutas
app.use('/api/sheet/', bodyParser.raw({
  limit : "500mb"
}),obtenerDatos);
app.get('/', (req, res) => {
    res.send('Hello World!')
  })
app.listen(3000,()=>{
    console.log("Servidor Node JS " 3000);
});

I need help please

I get error, the image has a very long text.

Error

[Unhandled promise rejection: TypeError: Already read]
 at node_modules\whatwg-fetch\dist\fetch.umd.js:169:28 in consumed
 at node_modules\whatwg-fetch\dist\fetch.umd.js:307:29 in text
 at node_modules\whatwg-fetch\dist\fetch.umd.js:330:13 in json
 at src\api\fetch.js:22:15 in postData
 ......

Image example

"base64": "/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZA

CodePudding user response:

You need to make a blob before sending a base64 string. But if you are using image picker from react native you can use this code to append image to form data

let formdata = new FormData();
formdata.append('Name of the key from backend', {
    uri: 'file path of image',
    type: 'image type e.g jpeg/png etc',
    name: 'image name',
    });

After that send request like this

let axiosConfig = {headers:{}}
axios.post(URL, formdata, axiosConfig)

CodePudding user response:


A la final lo arregle de la siguiente manera.
In the end i can fix with the next code.

const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const app = express();
const obtenerDatos = require('./controlador/obtenerDatos');

app.use(cors());//Para intercambiar recursos entre cliente y servidor, el argumento no es obligacion

app.use(bodyParser.json({limit: '150mb', extended: true}));

app.use(bodyParser.urlencoded({
  limit: '150mb',
  parameterLimit: 1000000,
  extended: true 
}));

app.use('/api/sheet/',obtenerDatos);
app.get('/', (req, res) => {
    res.send('Hello World!')
  })
app.listen(3000,()=>{
    console.log("Servidor Node JS " 3000);
});


Con este codigo se puede enviar una imagen en base 65, gracias a todos.
Thanks for all. This code can recibe base64.

  • Related