Java如何异步上传图片？

前端实现（HTML + JavaScript）

使用FormData和Fetch API实现异步上传：

<input type="file" id="imageUpload" accept="image/*">
<button onclick="uploadImage()">上传</button>
<div id="progressBar"></div>
<script>
async function uploadImage() {
  const fileInput = document.getElementById('imageUpload');
  const file = fileInput.files[0];
  if (!file) return alert("请选择图片");
  // 验证文件类型和大小（2MB以内）
  const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!validTypes.includes(file.type)) {
    return alert("仅支持JPG/PNG/GIF格式");
  }
  if (file.size > 2 * 1024 * 1024) {
    return alert("图片大小不能超过2MB");
  }
  // 构建表单数据
  const formData = new FormData();
  formData.append("image", file);
  try {
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData,
      // 不需要手动设置Content-Type，浏览器会自动处理
    });
    const result = await response.json();
    if (response.ok) {
      alert(`上传成功！路径: ${result.filePath}`);
    } else {
      throw new Error(result.error || "上传失败");
    }
  } catch (error) {
    console.error("Error:", error);
    alert("上传出错: " + error.message);
  }
}
</script>

后端实现（Java Servlet）

使用HttpServlet处理上传请求：

@WebServlet("/upload")
@MultipartConfig(maxFileSize = 2 * 1024 * 1024) // 限制2MB
public class ImageUploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws IOException {
        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        try {
            Part filePart = request.getPart("image");
            String fileName = getFileName(filePart);
            // 安全校验：防止路径遍历攻击
            String safeFileName = fileName.replaceAll("[^a-zA-Z0-9\.\-]", "_");
            // 存储路径（示例：项目根目录的uploads文件夹）
            String uploadPath = getServletContext().getRealPath("") + File.separator + "uploads";
            File uploadDir = new File(uploadPath);
            if (!uploadDir.exists()) uploadDir.mkdir();
            // 保存文件
            String filePath = uploadPath + File.separator + safeFileName;
            filePart.write(filePath);
            // 返回成功响应（前端可访问的相对路径）
            out.print("{"filePath": "/uploads/" + safeFileName + ""}");
        } catch (Exception e) {
            response.setStatus(500);
            out.print("{"error": "" + e.getMessage() + ""}");
        }
    }
    // 从Part头信息提取文件名
    private String getFileName(Part part) {
        String header = part.getHeader("content-disposition");
        return header.split("filename=")[1].replace(""", "");
    }
}

Spring Boot实现方案（推荐）

使用Spring Web简化开发：

@RestController
public class UploadController {
    @PostMapping("/upload")
    public ResponseEntity<Map<String, String>> uploadImage(
            @RequestParam("image") MultipartFile file) {
        Map<String, String> response = new HashMap<>();
        try {
            // 校验文件
            if (file.isEmpty()) throw new Exception("文件为空");
            if (!file.getContentType().startsWith("image/")) {
                throw new Exception("仅支持图片格式");
            }
            // 生成唯一文件名（防重名）
            String fileName = UUID.randomUUID() + "_" + file.getOriginalFilename();
            Path uploadPath = Paths.get("uploads/" + fileName);
            // 保存文件
            Files.createDirectories(uploadPath.getParent());
            Files.write(uploadPath, file.getBytes());
            response.put("filePath", "/uploads/" + fileName);
            return ResponseEntity.ok(response);
        } catch (Exception e) {
            response.put("error", e.getMessage());
            return ResponseEntity.status(500).body(response);
        }
    }
}

关键安全措施

1. 文件类型过滤
   • 前端：通过accept="image/*"限制选择类型
   • 后端：检查Content-Type（如image/jpeg）和文件扩展名
2. 大小限制
   • Servlet：@MultipartConfig(maxFileSize=...)
   • Spring Boot：spring.servlet.multipart.max-file-size=2MB
3. 文件名安全
   • 使用UUID重命名文件，避免路径遍历攻击
4. 存储隔离

   文件保存在Web目录外（如Nginx独立配置），防止反面执行

   

优化用户体验

1. 进度显示（前端添加）：

   // 在fetch请求中添加
   const controller = new AbortController();
   fetch('/upload', {
     signal: controller.signal,
     body: formData
   });
   // 用户可随时取消上传
   document.getElementById("cancelBtn").addEventListener("click", () => controller.abort());

2. 图片预览：

   const reader = new FileReader();
   reader.onload = (e) => document.getElementById("preview").src = e.target.result;
   reader.readAsDataURL(file);

异步上传图片的核心步骤：

1. 前端：通过FormData封装文件，用Fetch API发送异步请求
2. 后端：
   • Servlet：使用@MultipartConfig和request.getPart()
   • Spring Boot：@RequestParam MultipartFile
3. 安全：校验类型/大小、重命名文件、隔离存储目录
4. 体验优化：进度条、取消功能、实时预览

引用说明：

• 文件上传规范参考 Mozilla Developer Network
• Java Servlet 文件处理基于 Oracle官方文档
• Spring Boot 实现参考 Spring官方指南
• 安全实践依据 OWASP文件上传建议