跨域File Upload绝招：SSM前端AJAX方式、formData文件格式上传二进制流文件

2024-01-21 02:03:18

在 SSM 框架下，通过 AJAX 轻松实现跨域文件上传

跨域文件上传一直是困扰 Web 开发者的一个难题。特别是在流行的 SSM（Spring MVC + Spring + MyBatis）框架中，跨域上传更为复杂。本文将深入探讨如何使用 AJAX 在 SSM 框架下轻松实现跨域文件上传，并提供分步指南和代码示例。

了解跨域问题

跨域指的是当客户端脚本（如 JavaScript）试图与不同域或端口上的服务器交互时发生的错误。浏览器出于安全考虑会限制跨域请求，因此直接上传文件到不同域名的服务器可能会失败。

解决方案：AJAX 和 FormData

AJAX（异步 JavaScript 和 XML）允许客户端在不重新加载页面的情况下与服务器通信。通过利用 AJAX，我们可以将文件作为二进制流上传到服务器。

FormData 对象提供了上传文件的便捷方法。它将文件封装到一个对象中，并在发送到服务器之前自动设置适当的标头。

前端实现

1. HTML 代码：

<form id="uploadForm" action="upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file" multiple>
  <input type="submit" value="Upload">
</form>

此 HTML 表单定义了一个文件上传字段，并将其提交给“upload”端点。

2. JavaScript 代码：

var form = document.getElementById("uploadForm");

form.addEventListener("submit", function(e) {
  e.preventDefault();

  var formData = new FormData(form);

  var xhr = new XMLHttpRequest();

  xhr.open("POST", "upload", true);

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

  xhr.send(formData);
});

JavaScript 代码获取表单数据，创建 FormData 对象并使用 AJAX 通过 XMLHttpRequests (XHR) 将其发送到服务器。

后端实现

Java 代码：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String upload(@RequestParam("file") MultipartFile file) {
  try {
    // 保存文件到本地
    String filePath = "E:/upload/" + file.getOriginalFilename();
    file.transferTo(new File(filePath));

    // 返回成功信息
    return "上传成功！";
  } catch (IOException e) {
    e.printStackTrace();

    // 返回失败信息
    return "上传失败！";
  }
}