Cómo subir archivos al servidor usando JavaScript

Cargar un archivo y procesarlo en el backend en una de las funcionalidades de manejo de archivos más comunes en una aplicación web

Cargar un archivo y procesarlo en el backend en una de las funcionalidades de manejo de archivos más comunes en una aplicación web: piense en cargar un avatar o un archivo adjunto.

Digamos que tenemos un elemento de entrada de archivo HTML:

<input type="file" id="fileUpload" />

Registramos un manejador de cambios en el#fileUpload DOMelemento, y cuando el usuario elige una imagen, activamos elhandleImageUpload()función pasando en el archivo seleccionado.

const handleImageUpload = event => {
  const files = event.target.files
  const formData = new FormData()
  formData.append('myFile', files[0])

fetch(’/saveImage’, { method: ‘POST’, body: formData }) .then(response => response.json()) .then(data => { console.log(data.path) }) .catch(error => { console.error(error) }) }

document.querySelector(’#fileUpload’).addEventListener(‘change’, event => { handleImageUpload(event) })

Usamos elObtener APIpara enviar el archivo al servidor. Cuando el servidor regrese exitosamente, nos enviará la ruta de la imagen en elpathpropiedad.

Con eso, haremos lo que tengamos que hacer, como actualizar la interfaz con la imagen.

Manejo de la carga de archivos del lado del servidor usando Node.js

La parte del servidor se detalla a continuación. Estoy usandoNode.jscon elRápidomarco para manejar la solicitud.

Instala elexpress-fileuploadmódulo npm:

npm install express-fileupload

y agréguelo a su middleware:

import fileupload from 'express-fileupload'

//or const fileupload = require(‘express-fileupload’)

Después de crear su aplicación Express, agregue:

app.use(
		fileupload(),
    //...

Esto es necesario porque, de lo contrario, el servidor no puede analizar las cargas de archivos.

Ahora los archivos cargados se proporcionan enreq.files. Si olvida agregar ese middleware,req.filesseríaundefined.

app.post('/saveImage', (req, res) => {
  const fileName = req.files.myFile.name
  const path = __dirname + '/images/' + fileName

image.mv(path, (error) => { if (error) { console.error(error) res.writeHead(500, { ‘Content-Type’: ‘application/json’ }) res.end(JSON.stringify({ status: ‘error’, message: error })) return }

<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">writeHead</span>(<span style="color:#ae81ff">200</span>, {
  <span style="color:#e6db74">'Content-Type'</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'application/json'</span>
})
<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">end</span>(<span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>({ <span style="color:#a6e22e">status</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'success'</span>, <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'/img/houses/'</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">fileName</span> }))

}) })

Esta es la menor cantidad de código necesaria para manejar archivos.

Llamamos almvpropiedad de la imagen cargada. Eso nos lo proporciona elexpress-fileuploadmódulo. Lo movemos apathy luego comunicamos el éxito (¡o un error!) al cliente.

Verifique las propiedades de los archivos cargados en el lado del cliente

Si necesita verificar el tipo de archivo o el tamaño del archivo, puede preprocesarlos en elhandleImageUploadfunción, así:

const handleImageUpload = event => {
  const files = event.target.files
  const myImage = files[0]
  const imageType = /image.*/

if (!myImage.type.match(imageType)) { alert(‘Sorry, only images are allowed’) return }

if (myImage.size > (100*1024)) { alert(‘Sorry, the max allowed size for images is 100KB’) return }

//… }


Más tutoriales de js: