La carga y descarga de archivos son funciones muy básicas en el desarrollo web, pero en el desarrollo real, a menudo necesitamos mostrar el progreso de la carga o descarga de archivos en tiempo real. Este artículo presentará cómo usar Springboot para implementar la carga y descarga de archivos, y agregará la función de barra de progreso en tiempo real.
Subir archivo
Agregar dependencias de Maven
Primero, necesitamos agregar las siguientes dependencias de Maven:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
Entre ellos, spring-boot-starter-web es una de las dependencias proporcionadas por Spring Boot para crear aplicaciones web, y commons-fileupload es una popular biblioteca de carga de archivos Java.
Crear formulario HTML
A continuación, debemos crear un formulario HTML para enviar el archivo. En este formulario, podemos usar elementos para seleccionar archivos para cargar y elementos para enviar el formulario.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file"/>
<br/>
<input type="submit" value="Upload"/>
</form>
</body>
</html>
En este formulario, establecemos el atributo de acción del formulario en "/cargar", que es la URL donde manejaremos la solicitud de carga.
Implementar carga de archivos
En Springboot, puede usar la clase org.springframework.web.multipart.MultipartFile para procesar archivos cargados. Podemos escribir un controlador para recibir y procesar archivos cargados:
@RestController
public class UploadController {
@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) throws IOException {
// do something with the file
return "success";
}
}
En el código anterior, usamos la anotación @RequestParam para especificar el nombre del parámetro de carga del archivo y guardar el archivo en el disco o realizar otras operaciones. Finalmente, devolvemos una cadena simple como el contenido de la respuesta.
añadir barra de progreso
Para realizar la función de barra de progreso de carga, necesitamos usar JavaScript y Ajax para lograrlo. Específicamente, podemos usar el objeto XMLHttpRequest para enviar una solicitud asincrónica y actualizar la barra de progreso en tiempo real durante el proceso de carga.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("form").submit(function (event) {
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progress").css("width", percentComplete * 100 + "%");
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progress").css("width", percentComplete * 100 + "%");
}
}, false);
return xhr;
},
type: "POST",
url: "/upload",
data: formData,
processData: false,
contentType: false,
success: function (data) {
alert("Upload complete!");
}
});
});
});
</script>
</head>
<body>
<form>
<input type="file" name="file"/>
<br/>
<button type="submit">Upload</button>
</form>
<div style="background-color: #ddd; height: 20px; width: 0%;" id="progress"></div>
</body>
</html>
En el código anterior, usamos jQuery para enviar la solicitud XHR y actualizar la barra de progreso durante la carga. Específicamente, agregamos un controlador de eventos de progreso a xhr.upload y el objeto xhr para actualizar la barra de progreso en tiempo real mientras se carga el archivo.
Descargar Documento
Implementar la descarga de archivos
Para implementar la descarga de archivos, necesitamos escribir un controlador para manejar la solicitud de descarga y usar la clase org.springframework.core.io.Resource para devolver el archivo al cliente como contenido de respuesta.
@RestController
public class DownloadController {
@GetMapping("/download")
public ResponseEntity<Resource> download() throws IOException {
Resource file = new FileSystemResource("/path/to/file");
HttpHeaders headers = new HttpHeaders();
headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + file.getFilename());
return ResponseEntity.ok()
.headers(headers)
.contentLength(file.contentLength())
.contentType(MediaType.parseMediaType("application/octet-stream"))
.body(new InputStreamResource(file.getInputStream()));
}
}
En el código anterior, usamos la anotación @GetMapping para especificar la URL que maneja la solicitud de descarga y usamos la clase org.springframework.core.io.Resource para leer el contenido del archivo. Finalmente, devolvemos el archivo al cliente como el contenido de la respuesta.
añadir barra de progreso
La función de agregar una barra de progreso de descarga es similar a la barra de progreso de carga, aún podemos usar el objeto XMLHttpRequest y JavaScript para lograrlo. En concreto, podemos enviar una solicitud asíncrona al Controller y actualizar la barra de progreso en tiempo real durante el proceso de descarga.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Download</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#download").click(function (event) {
event.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open("GET", "/download", true);
xhr.responseType = "blob";
xhr.onload = function () {
if (xhr.status === 200) {
var contentType = xhr.getResponseHeader("Content-Type");
var contentDisposition = xhr.getResponseHeader("Content-Disposition");
var blob = new Blob([xhr.response], {
type: contentType});
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = contentDisposition.split("=")[1];
link.click();
}
};
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progress").css("width", percentComplete * 100 + "%");
}
}, false);
xhr.send();
});
});
</script>
</head>
<body>
<button id="download">Download</button>
<div style="background-color: #ddd; height: 20px; width: 0%;" id="progress"></div>
</body>
</html>
En el código anterior, hemos usado jQuery para enviar la solicitud XHR y actualizar la barra de progreso mientras la descarga está en curso. Específicamente, agregamos un controlador de eventos de progreso al objeto xhr para actualizar la barra de progreso en tiempo real mientras se descarga el archivo.
en conclusión
Este artículo presenta cómo usar Springboot para implementar la carga y descarga de archivos, y agregarle la función de barra de progreso en tiempo real. Al cargar y descargar archivos, usamos el objeto XMLHttpRequest y JavaScript para implementar una barra de progreso en tiempo real. Esta característica puede ayudar a los usuarios a comprender mejor el progreso de las cargas y descargas de archivos y mejorar la experiencia del usuario.