Para cualquier desarrollador que imagine crear una aplicación, cargar imágenes es un componente importante que debe tener en cuenta. Es un requisito esencial al crear una aplicación completa. La carga de archivos significa que un usuario de una máquina cliente desea cargar archivos en el servidor. Por ejemplo, los usuarios pueden cargar imágenes, videos, etc. en Facebook, Instagram. Como con cualquier problema de programación, hay muchas maneras de lograr este resultado. Este artículo explica una forma sencilla de implementar el enfoque para cargar un solo archivo con React.
El proceso de carga de una imagen se puede dividir en dos pasos:
- Seleccione un archivo (entrada del usuario): para permitir que el usuario elija un archivo, el primer paso es agregar la etiqueta a nuestro componente de la aplicación. Esta etiqueta debe tener el atributo de tipo establecido como «archivo». Ahora, necesitamos un controlador de eventos para escuchar cualquier cambio realizado en el archivo. Este controlador de eventos se activará cada vez que el usuario seleccione un nuevo archivo y actualizará el estado.
- Enviar una solicitud al servidor: después de almacenar el archivo seleccionado (en el estado), ahora debemos enviarlo a un servidor. Para ello, podemos utilizar fetch o Axios. (En este código, usamos Axios, un cliente HTTP basado en promesas para el navegador y NodeJS). El archivo se envía al servicio envuelto en un objeto FormData.
Instalación Axios:- Ejecute el siguiente comando.
npm install axios --save
Abra el directorio de su proyecto de reacción y edite el archivo App.js de la carpeta src:
src App.js:
javascript
import axios from 'axios';
import React,{Component} from 'react';
class App extends Component {
state = {
// Initially, no file is selected
selectedFile: null
};
// On file select (from the pop up)
onFileChange = event => {
// Update the state
this.setState({ selectedFile: event.target.files[0] });
};
// On file upload (click the upload button)
onFileUpload = () => {
// Create an object of formData
const formData = new FormData();
// Update the formData object
formData.append(
"myFile",
this.state.selectedFile,
this.state.selectedFile.name
);
// Details of the uploaded file
console.log(this.state.selectedFile);
// Request made to the backend api
// Send formData object
axios.post("api/uploadfile", formData);
};
// File content to be displayed after
// file upload is complete
fileData = () => {
if (this.state.selectedFile) {
return (
<div>
<h2>File Details:</h2>
<p>File Name: {this.state.selectedFile.name}</p>
<p>File Type: {this.state.selectedFile.type}</p>
<p>
Last Modified:{" "}
{this.state.selectedFile.lastModifiedDate.toDateString()}
</p>
</div>
);
} else {
return (
<div>
<br />
<h4>Choose before Pressing the Upload button</h4>
</div>
);
}
};
render() {
return (
<div>
<h1>
GeeksforGeeks
</h1>
<h3>
File Upload using React!
</h3>
<div>
<input type="file" onChange={this.onFileChange} />
<button onClick={this.onFileUpload}>
Upload!
</button>
</div>
{this.fileData()}
</div>
);
}
}
export default App;
Producción:
Publicación traducida automáticamente
Artículo escrito por verma_anushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA