En este artículo, aprenderemos cómo podemos simplemente cargar una foto desde nuestro dispositivo local a nuestro Proyecto React. Podemos lograr esto haciendo una URL de método estático. createObjectURL().
La URL del método. createObjectURL() toma un objeto y devuelve una URL que representa el objeto utilizado como parámetro.
Requisito previo:
- Introducción e instalación react.js
- Ganchos de reacción
- Reaccionar UseState
Creando la aplicación React:
Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalar localmente bynpm i create-react-app.
npm create-react-app project
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.
cd project
Estructura del proyecto: Se verá así:
Estamos creando un archivo de nombre de estado usando React-hook useState que almacenará el archivo. Estamos creando un campo de entrada que tomará un archivo como entrada.
Estamos creando una función onChange que nombra handleChange que almacena la string de URL generada para la imagen que hemos subido a través de la URL. createObjectURL().
Si hacemos console.log así:
console.log(e.target.files)
Obtendremos la siguiente salida:
Por lo tanto, en nuestro estado de archivo, almacenaremos solo los archivos [0] que solo contendrán el nombre del archivo que hemos subido. Estamos almacenando los datos en nuestro estado de archivo a través de la función handleChange.
Ejemplo: después, estamos colocando esa string almacenada en el archivo App.js en el atributo src de la etiqueta img para mostrarla.
App.js
import React, { useState } from "react";
function App() {
const [file, setFile] = useState();
function handleChange(e) {
console.log(e.target.files);
setFile(URL.createObjectURL(e.target.files[0]));
}
return (
<div className="App">
<h2>Add Image:</h2>
<input type="file" onChange={handleChange} />
<img src={file} />
</div>
);
}
export default App;
Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
