Saltar al contenido

¿Cómo subir archivos de reaccionar con NodeJS y ExpressJan, 3rdIn este tutorial, vamos a aprender acerca de la carga de archivos en React …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de la carga de archivos en Reaccionar con el uso de un motor Express como.

Creación Server Express backend

En primer lugar, estamos creando una API de la postal usando NodeJS y expresar, lo que nos ayuda a cargar los archivos como (imágenes, pdf, etc) para el servidor back-end. Configuración

el proyecto de instalación de back-end

Let el proyecto backend Node.js ejecutando los siguientes comandos uno por uno.

mkdir fileupload
cd fileupload
npm init -y

paquetes Instalación

Ahora bien, tenemos que instalar cuatro paquetes que son expresar, expresar-FileUpload, coros y nodemon.

Ejecutar el comando siguiente para instalar los paquetes.

npm i express express-fileupload cors nodemon

Ahora abra la carpeta fileupload en su editor de código favorito y crear un nuevo archivo llamado server.js.

Agregue el código siguiente al archivo server.js.

const express = require('express');
const fileUpload = require('express-fileupload');
const cors = require('cors')

const app = express();

// middle ware
app.use(express.static('public')); /o access the files in public folder
app.use(cors()); // it enables all cors requests
app.use(fileUpload());

// file upload api
app.post('/upload', (req, res) => {

if (!req.files) {
return res.status(500).send({ msg: "file is not found" })
}
// accessing the file
const myFile = req.files.file;

// mv() method places the file inside public directory
myFile.mv(`${__dirname}/public/${myFile.name}`, function (err) {
if (err) {
console.log(err)
return res.status(500).send({ msg: "Error occured" });
}
// returing the response with file path and name
return res.send({name: myFile.name, path: `/${myFile.name}`});
});
})

app.listen(4500, () => {
console.log('server is running at port 4500');
})

En el código anterior, primero se importaron tres paquetes que son expresar, expresan-fileupload y coros, junto creamos solicitud expresa mediante la invocación de la función expreso ().

Nuestra ruta posterior API es / carga.

Estamos colocando los archivos dentro la carpeta pública por lo que es necesario crear una carpeta pública dentro de nuestro proyecto de backend.

Adición de secuencias de comandos

Para ejecutar y reiniciar el servidor que estamos utilizando el nodemon, abra su package.json añadir el siguiente código a los scripts objeto.

"server": "nodemon server.js"

Ahora se inicia el servidor back-end mediante la ejecución de NPM iniciar comandos del servidor en su terminal.

Creación Reaccionar App

Vamos a crear la nueva aplicación reaccionan mediante la ejecución del siguiente comando.

npx create-react-app react-fileupload

Ahora cambiar el directorio de trabajo actual ejecutando el siguiente mandato.

cd react-fileupload

Instalación biblioteca Axios

También es necesario instalar la biblioteca de cliente HTTP axios que se utiliza para hacer las peticiones http.

npm i axios

componente de creación de archivos de subida

Abrir la carpeta-fileupload reaccionar en el editor de código favorito y crear un nuevo archivo llamado fileupload.js dentro de la carpeta src.

Ahora agregue el código siguiente.

import React, { useRef, useState } from 'react';
import axios from 'axios';

function FileUpload() {

const [file, setFile] = useState(''); // storing the uploaded file // storing the recived file from backend
const [data, getFile] = useState({ name: "", path: "" }); const [progress, setProgess] = useState(0); // progess bar
const el = useRef(); // accesing input element

const handleChange = (e) => {
setProgess(0)
const file = e.target.files[0]; // accesing file
console.log(file);
setFile(file); // storing file
}

const uploadFile = () => {
const formData = new FormData(); formData.append('file', file); // appending file
axios.post('http://localhost:4500/upload', formData, {
onUploadProgress: (ProgressEvent) => {
let progress = Math.round(
ProgressEvent.loaded / ProgressEvent.total * 100) + '%';
setProgess(progress);
}
}).then(res => {
console.log(res);
getFile({ name: res.data.name,
path: 'http://localhost:4500' + res.data.path
})
}).catch(err => console.log(err))}

return (

{progress}


{/* displaying received image*/}
{data.path && {data.name}}

);
}

export default FileUpload;

En el código anterior, hemos utilizado reaccionar ganchos para administrar el estado y tenemos dos funciones que son handleChange y uploadfile. La función

handleChange se invoca cuando el usuario selecciona el archivo. La función

uploadfile () se utiliza para cargar el archivo en nuestro API / carga.

También hay una barra de progreso, que muestra cómo subido mucho cantidad del archivo y también estamos mostrando la imagen una vez que llega una respuesta desde el servidor.

estilos css Adición

Añadir los siguientes estilos para su archivo App.css.

.App {
margin: 2rem auto;
max-width: 800px;
}

img{
width: 500px;
height: 500px;
object-fit: contain;
}

.progessBar{
height: 1rem;
width: 0%;
background-color: rgb(68, 212, 231);
color: white;
padding:2px
}

.file-upload{

box-shadow: 2px 2px 2px 2px #ccc;
padding: 2rem;
display: flex;
flex-direction: column;

justify-content: space-between;
font-size: 1rem;
}

input , div , button{
margin-top: 2rem;
}

.upbutton{
width: 5rem;
padding: .5rem;
background-color: #2767e9;
color: aliceblue;
font-size: 1rem;
cursor: pointer;
}

Ahora importar el componente FileUpload dentro del archivo app.js.

import React from 'react';
import FileUpload from './fileupload';
import './App.css';

function App() {
return (

);
}

export default App;

Comenzar la aplicación reacciona mediante la ejecución de NPM comenzar.

Prueba

reaccionar prueba del componente de carga de archivos

Let nuestro componente FileUpload cargando un archivo de imagen de muestra.

Nota: Asegúrese de que su tanto en el servidor back-end está encendido.

Abra su navegador y vaya a localhost: 3000.

Código

repositorios del servidor backend

  • Reaccionar aplicación