0
239
VistasCarga de archivos a una carpeta personalizada en reaccionar
Hola, necesito cargar el archivo en react usando el component de class , ya que es una aplicación heredada. Necesito este archivo solo en la UI de usuario, así que no quiero guardarlo en la base de datos. Tengo que guardar en la public folder también en la carpeta pública. Necesito dar funcionalidad al usuario para dar el nombre del archivo y la carpeta.
Qué cambios necesito hacer en el siguiente código. El siguiente código funciona perfectamente. Lo único es que necesito cargar el archivo en la carpeta y necesito ingresar manualmente file and folder name .
import axios from 'axios'; import React, { Component } from 'react'; class FileUpload extends Component { state = { selectedFile: null, }; onFileChange = (event) => { this.setState({ selectedFile: event.target.files[0] }); }; onFileUpload = () => { const formData = new FormData(); formData.append( 'myFile', this.state.selectedFile, this.state.selectedFile.name ); console.log(this.state.selectedFile); axios.post('api/uploadfile', formData); //I need to change this line }; 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>Plese select the translation file</h1> <div> <input type="file" onChange={this.onFileChange} /> <button onClick={this.onFileUpload}>Upload!</button> </div> {this.fileData()} </div> ); } } export default FileUpload;Edición 1:-
Edición 2: -
app.listen(80, () => console.log('Listening on port 80')); axios.post('http://localhost:80/api/uploadfile', formData, { Error 
1 Respuestas
Responde la pregunta0
Si guarda el archivo en la carpeta public , no estará disponible para el front-end hasta que construya el proyecto de reacción ( react-scripts build ). En lugar de eso, puede guardarlo directamente en la carpeta de build . Pero la próxima vez que construyas el proyecto, los archivos cargados desaparecerán. Puedes decidir qué hacer allí.
Volviendo a tu pregunta,
Puede lograrlo mediante la ejecución de un servidor simple cuyos servidores se encuentran frente a los archivos de compilación y que maneja algunas solicitudes HTTP.
- Instale
express(servidor) ymulter(para manejar la carga de archivos).
npm i express multer- En el nivel raíz de su proyecto de reacción, cree otra carpeta llamada
server. Dentro de eso, cree un archivo llamadoindex.jsy agregue el siguiente código.
const express = require("express"); const app = express(); const multer = require('multer') // setup multer for file upload var storage = multer.diskStorage( { destination: './build', filename: function (req, file, cb ) { cb( null, file.originalname); } } ); const upload = multer({ storage: storage } ) app.use(express.json()); // serving front end build files app.use(express.static(__dirname + "/../build")); // route for file upload app.post("/api/uploadfile", upload.single('myFile'), (req, res, next) => { console.log(req.file.originalname + " file successfully uploaded !!"); res.sendStatus(200); }); app.listen(3000, () => console.log("Listening on port 3000"));- Para iniciar el servidor anterior, cambie el comando de
starten las secciones de secuencias descriptsen el archivopackage.json. Construirá el proyecto y comenzará a ejecutar el servidor.
"scripts": { "start": "npm run build && node ./server", ... ... }- Su controlador de carga de archivos debe tener un tipo de contenido como
multipart/form-data
onFileUpload = () => { const formData = new FormData(); formData.append("myFile", this.state.selectedFile); console.log(this.state.selectedFile); axios.post("http://localhost:3000/api/uploadfile", formData, { headers: { "content-type": "multipart/form-data", }, }); //I need to change this line }; Ahora ejecute npm start e intente cargar un archivo. Aparecerá en la carpeta de build . Puede cambiarlo según sus necesidades.