前端XMLHttpRequest、Fetch API、Axios实现文件上传、下载方法及后端Spring文件服务器处理方法

前端文件上传与下载实现及后端Spring文件服务器处理

在现代Web开发中，文件上传和下载是常见的需求。在前端，我们可以使用XMLHttpRequest、Fetch API和Axios等技术来实现文件上传和下载。而在后端，Spring框架提供了强大的支持来处理文件上传和下载请求。接下来，我们将分别介绍这些技术的实现方法以及后端如何处理这些请求。

一、前端实现

1. 使用XMLHttpRequest上传文件

XMLHttpRequest是最早实现AJAX的技术之一，支持异步请求。

HTML部分：

<input type="file" id="fileInput">
<button id="uploadBtn">上传文件</button>

JavaScript部分：

document.getElementById('uploadBtn').onclick = function() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    formData.append('file', file);

    xhr.open('POST', '/upload', true);

    xhr.onload = function() {
        if (xhr.status === 200) {
            alert('文件上传成功');
        } else {
            alert('文件上传失败');
        }
    };

    xhr.send(formData);
};

2. 使用Fetch API上传文件

Fetch API是现代JavaScript中较为标准的API，使用起来更加简洁。

JavaScript部分：

document.getElementById('uploadBtn').onclick = async function() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('file', file);

    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            alert('文件上传成功');
        } else {
            alert('文件上传失败');
        }
    } catch (error) {
        console.error('Error:', error);
        alert('文件上传失败');
    }
};

3. 使用Axios上传文件

Axios是一个基于Promise的HTTP客户端，支持更简单的请求处理。

JavaScript部分：

document.getElementById('uploadBtn').onclick = function() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('file', file);

    axios.post('/upload', formData)
        .then(response => {
            alert('文件上传成功');
        })
        .catch(error => {
            alert('文件上传失败');
            console.error('Error:', error);
        });
};

二、后端处理

接下来，我们来看如何在Spring后端处理文件上传和下载。

1. 文件上传处理

首先，我们使用Spring Boot构建一个简单的文件上传接口。

控制器部分：

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/api")
public class FileUploadController {

    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        // 保存文件到本地或数据库
        try {
            String fileName = file.getOriginalFilename();
            file.transferTo(new File("uploads/" + fileName)); // 文件保存路径
            return "文件上传成功: " + fileName;
        } catch (Exception e) {
            e.printStackTrace();
            return "文件上传失败";
        }
    }
}

2. 文件下载处理

在Spring中，文件下载通常通过ResponseEntity来实现。

控制器部分：

import org.springframework.core.io.FileSystemResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

import java.io.File;

@RestController
@RequestMapping("/api")
public class FileDownloadController {

    @GetMapping("/download/{fileName}")
    public ResponseEntity<FileSystemResource> downloadFile(@PathVariable String fileName) {
        File file = new File("uploads/" + fileName);
        if (!file.exists()) {
            return ResponseEntity.status(HttpStatus.NOT_FOUND).build();
        }

        HttpHeaders headers = new HttpHeaders();
        headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName);

        return new ResponseEntity<>(new FileSystemResource(file), headers, HttpStatus.OK);
    }
}

总结

通过以上示例，我们展示了使用XMLHttpRequest、Fetch API和Axios等技术实现文件上传，以及在Spring后端如何处理这些请求。此外，还演示了文件下载的实现方法。这些技术的结合使得前后端文件操作变得简单而高效。在实际应用中，可以根据需求进一步扩展和完善这些示例。