JavaScript 使用 fetch 上传文件

fetch 是 ES6 的一个新的特性，用来简化处理异步的 Ajax 请求。

fetch 可以参考 MDN 上的教程：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

假设后端（Java）有一个用于上传文件的接口

/**
  * 上传文件
  * @param imgFile
  * @return
  */
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
@ResponseBody
public OperationResult uploadFile(@RequestParam("imgFile") MultipartFile imgFile);

前端中只要使用如下代码即可上传一个文件

<!-- 这里是用来演示的 html 内容 -->
<input id="imgFile" type="file" />

document.querySelector("#imgFile").addEventListener("change", () => {
  // 创建一个 FormData 对象
  const fd = new FormData();
  // 得到 File 对象
  const file = document.querySelector("#imgFile").files[0];
  fd.append("imgFile", file);
  // 这里的 url 是上传链接，此处为 /uploadFile
  fetch(url, {
    method: "POST",
    body: fd,
    // 注：此处不需要设置 headers
  }).then((res) => {
    // 之后的处理
  });
});

和 jquery ajax 的感觉差不多，不过能实现效果就好啦