JavaScript怎样实现Spring文件上传_JS实现Spring文件上传功能的操作步骤

陆砚码

2026-10-18 • 👁 0人浏览过

JavaScript配合Spring实现文件上传需前后端协同，前端用FormData通过fetch发送文件，后端用@RequestParam接收并保存，配置文件大小限制确保安全。 JavaScript 本身无法直接实现 Spring 文件上传的全部逻辑，因为文件上传涉及前端（JavaScript）和后端（Spring Boot / Spring MVC）协同工作。JavaScript 负责在浏览器中选择文件并发送请求，Spring 负责接收、解析和保存文件。以下是完整的操作步骤，帮助你用 JS 配合 Spring 实现文件上传功能。1. 前端：使用 JavaScript 构建文件上传请求在 HTML 页面中添加文件输入框和上传按钮：HTML 结构：

JavaScript 使用 FormData 发送文件：立即学习“Java免费学习笔记（深入）”；获取文件并使用

fetch

或

XMLHttpRequest

提交到 Spring 后端：

function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  
  if (!file) {
    alert("请选择文件");
    return;
  }

  const formData = new FormData();
  formData.append("file", file);

  fetch('/api/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    alert("上传成功: " + data.filename);
  })
  .catch(error => {
    alert("上传失败: " + error.message);
  });
}

2. 后端：Spring Boot 接收文件确保 Spring Boot 项目已启用文件上传支持（默认开启），然后编写控制器处理上传请求。Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载添加依赖（Maven 示例）：


    org.springframework.boot
    spring-boot-starter-web

Controller 示例：

@RestController
public class FileUploadController {

    private final String UPLOAD_DIR = "uploads/";

    @PostMapping("/api/upload")
    public ResponseEntity> handleFileUpload(@RequestParam("file") MultipartFile file) {
        Map response = new HashMap<>();

        try {
            // 确保上传目录存在
            Path uploadPath = Paths.get(UPLOAD_DIR);
            if (!Files.exists(uploadPath)) {
                Files.createDirectories(uploadPath);
            }

            // 保存文件
            String filename = System.currentTimeMillis() + "_" + file.getOriginalFilename();
            Path filePath = uploadPath.resolve(filename);
            Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);

            response.put("filename", filename);
            response.put("message", "文件上传成功");
            return ResponseEntity.ok(response);

        } catch (IOException e) {
            response.put("error", "上传失败: " + e.getMessage());
            return ResponseEntity.status(500).body(response);
        }
    }
}

3. 配置 Spring 文件上传限制（可选）在

application.yml

中配置文件大小限制：

spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB

这可以防止用户上传过大的文件导致服务器问题。4. 测试与部署启动 Spring Boot 应用，默认监听 8080 端口访问前端页面，选择文件并点击“上传”检查后台是否生成文件，以及返回结果是否正确查看

uploads/

目录确认文件已保存基本上就这些。只要前后端接口匹配，JavaScript 能顺利把文件传给 Spring，Spring 就能完成接收和存储。关键点是使用

FormData

和

@RequestParam("file")

对应字段名，避免参数不匹配错误。

相关文章