JavaScript 使用 fetch 上传文件

发表于 阅读次数： 阅读次数： Changyan： 本文字数： 912 阅读时长 ≈ 1 分钟

JavaScript 使用 fetch 上传文件

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

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

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

1
2
3
4
5
6
7
8
/**
  * 上传文件
  * @param imgFile
  * @return
  */
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
@ResponseBody
public OperationResult uploadFile(@RequestParam("imgFile") MultipartFile imgFile);

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

1
2
<!-- 这里是用来演示的 html 内容 -->
<input id="imgFile" type="file">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 的感觉差不多，不过能实现效果就好啦