Sube imágenes y archivos directamente desde el teléfono al servidor – ReactNative | Autor: Manoj Kanth | Enero de 2022

Cuando uso axios en React Native. Tengo un escenario en el que necesito cargar algunos archivos e imágenes y algunos otros detalles del usuario.Para lograr esto, debemos usar Formulario de datos Sube archivos directamente desde nuestra aplicación móvil al servidor.Esta Formulario de datos State proporciona una forma de crear fácilmente un conjunto de pares clave / valor que representan campos de formulario y sus valores.

Entonces, aquí hay un ejemplo de formdata.

var data = new FormData(); //initiating form datadata.append(‘first_name’, personalData.first_name); //stringdata.append(‘email’, personalData.email); //stringdata.append(‘avatar’, this.state.image.uri); // Base64 URI

notas: Al cargar un pdf, debe crear un objeto con las siguientes propiedades, como se muestra a continuación:

let selectedPdfObject= {
uri: ‘./emulator/bankstatement.pdf’,
type: ‘.pdf’,
name: ‘bankstatement’
}

Mismo vatioAl cargar una imagen, solo necesita crear un objeto de imagen como se muestra a continuación

let singleImageObject = {
uri: ‘./emulator/image.png’,
type: ‘image/jpeg’,
name: ‘image’
}

Si quieres subir Varias imágenes Debe crear una matriz de imágenes seleccionadas.

ejemplo:

imageArray.forEach(element => {let image = {
uri: element.path,
type: element.mime,
name: element.name,
};
modifiedImageArrayList.push(image);});

Matriz de imágenes: ¿Es la matriz de imágenes de mi elección?
Lista de matrices de imágenes modificadas: Es la matriz de imágenes con estos atributos que he modificado.

Finalmente, podemos adjuntar la imagen a formdata:

Si único imagen

data.append(‘image’,singleImageObject);

por muchos imagen:

modifiedImageArrayList.forEach(element => {data.append(‘image[]’, element);});

Entonces, los datos de mi formulario final se ven así:

Axios({
method: ‘post’,
url: ‘/uploadurl’,
data: formdata,
headers: {Authorization: `Bearer ${token}`},
})