JavaScript 使用 fetch 上传文件

本文最后更新于:2020年12月30日 早上

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