JavaScript 使用 fetch 上传文件

本文最后更新于:2018年8月7日 凌晨

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 的感觉差不多,不过能实现效果就好啦