En este tutorial, aprenderá a manejar datos de formularios de varias partes en React mediante la implementación de un ejemplo simple de carga de archivos. Usaremos Axios y HTML5 FormData
.
Para el backend, usaremos una aplicación PHP simple que expone un punto final único que acepta una solicitud POST que contiene el archivo / imagen para cargar.
Prerrequisitos
Deberá tener los siguientes requisitos previos para este tutorial:
- Conocimiento de JavaScript,
- Una experiencia laboral de React,
- Conocimiento de PHP,
- PHP instalado en su máquina,
- Node.js y NPM instalados en su máquina.
Creación de la aplicación de carga de archivos PHP
Abra una nueva terminal y cree una carpeta para nuestro proyecto:
$ mkdir react-php-file-upload
A continuación, navegue dentro de la carpeta de su proyecto y cree una backend
carpeta con un upload.php
archivo:
$ cd react-php-file-upload
$ mkdir backend && cd backend
$ touch upload.php
Abra el upload.php
archivo y agregue el siguiente código:
<?php
header('Content-Type: application/json; charset=utf-8');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
$response = array();
$upload_dir = 'uploads/';
$server_url = 'http://127.0.0.1:8000';
if($_FILES['avatar'])
{
$avatar_name = $_FILES["avatar"]["name"];
$avatar_tmp_name = $_FILES["avatar"]["tmp_name"];
$error = $_FILES["avatar"]["error"];
if($error > 0){
$response = array(
"status" => "error",
"error" => true,
"message" => "Error uploading the file!"
);
}else
{
$random_name = rand(1000,1000000)."-".$avatar_name;
$upload_name = $upload_dir.strtolower($random_name);
$upload_name = preg_replace('/\s+/', '-', $upload_name);
if(move_uploaded_file($avatar_tmp_name , $upload_name)) {
$response = array(
"status" => "success",
"error" => false,
"message" => "File uploaded successfully",
"url" => $server_url."/".$upload_name
);
}else
{
$response = array(
"status" => "error",
"error" => true,
"message" => "Error uploading the file!"
);
}
}
}else{
$response = array(
"status" => "error",
"error" => true,
"message" => "No file was sent!"
);
}
echo json_encode($response);
?>
A continuación, inicie el servidor PHP usando el siguiente comando desde la raíz de su proyecto:
$ php -S 127.0.0.1:8080
Ahora, tenemos un servidor PHP en ejecución que expone un /upload.php
punto final REST.
Instalando create-react-app
Instalemos la create-react-app
herramienta. Abra una nueva terminal y ejecute el siguiente comando:
$ npm install -g create-react-app
Creando la aplicación React
Creemos ahora nuestro proyecto React. En su terminal, ejecute el siguiente comando:
$ cd react-php-file-upload
$ create-react-app frontend
Después de crear los archivos e instalar las dependencias, puede iniciar su aplicación React usando los siguientes comandos:
$ cd frontend
$ npm start
Su aplicación React se ejecutará desde la http://localhost:3000
dirección. Esto también abrirá automáticamente su navegador web y navegará a esa dirección.
Crear un componente de formulario de carga de archivos de React
Ahora creemos un componente que contiene un formulario para cargar archivos. En la src/
carpeta, cree un FileUploadForm.js
archivo y comience agregando el siguiente código:
import React from 'react'
import axios from 'axios';
class FileUploadForm extends React.Component {}
export default FileUploadForm;
Importamos React
yaxios
creamos y exportamos el FileUploadForm
componente.
A continuación, cree una file
variable de estado para mantener el archivo a cargar:
class FileUploadForm extends React.Component {
constructor(props) {
super(props);
this.state ={
file:null
}
}
}
Crear un formulario para seleccionar el archivo
A continuación, defina el render()
método del componente que genera un formulario HTML:
render() {
return (
<form onSubmit={ this.onSubmit }>
<h1> React File Upload Example</h1>
<input type="file" onChange={ this.onChange } />
<button type="submit">Upload File</button>
</form>
)
}
Vinculamos el onSubmit
evento del formulario al onSubmit()
método y el onChange
evento de la <input>
etiqueta al onChange()
método que se llama al seleccionar un archivo.
A continuación, debemos definir los métodos onSubmit()
y onChange()
en el componente de la siguiente manera:
async onSubmit(e){
e.preventDefault()
let res = await this.uploadFile(this.state.file);
console.log(res.data);
}
onChange(e) {
this.setState({file:e.target.files[0]})
}
El onChange()
método llama al setState()
método para establecer la file
variable de estado en el archivo seleccionado. Este método se llama cuando se selecciona un archivo en la <input>
etiqueta de archivo .
El onSubmit()
método llama al uploadFile()
método para cargar el archivo seleccionado en el servidor PHP. El archivo se pasa como parámetro al método desde la file
variable de estado.
Carga de archivos con Axios y FormData
Definamos ahora el uploadFile()
método de la siguiente manera:
async uploadFile(file){
const formData = new FormData();
formData.append('avatar',file)
return await axios.post(this.UPLOAD_ENDPOINT, formData,{
headers: {
'content-type': 'multipart/form-data'
}
});
}
Primero creamos una instancia de FormData
, luego agregamos el archivo con la avatar
clave, ya que nuestra aplicación de carga de archivos PHP espera que el archivo exista bajo una avatar
clave en la $_FILES
matriz.
A continuación, llamamos al post()
método de axios
y pasamos la formData
instancia como el objeto de datos. También configuramos el content-type
encabezado de la solicitud en multipart/form-data
.
Finalmente, abra el src/App.js
archivo e importe el FileUploadForm
componente y luego llámelo en el render()
método:
import FileUploadForm from "./FileUploadForm.js"
class App extends Component {
render() {
return (
<FileUploadForm />
);
}
}
export default App;
Esta es una captura de pantalla de la interfaz de usuario del formulario de carga:
Esta es la esencia del ejemplo de carga de archivos PHP:
Esta es la esencia del componente de formulario de carga de archivos de React:
Conclusión
En este tutorial hemos utilizado React, Axios y HTML5 FormData
con un servidor PHP para crear un ejemplo simple de carga de archivos con datos de formulario de varias partes.
0 Comentarios
Dejanos tu comentario para seguir mejorando!