JavaScript 使用 fetch 上传文件
本文最后更新于:2020年12月30日 晚上
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
的感觉差不多,不过能实现效果就好啦
JavaScript 使用 fetch 上传文件
https://blog.rxliuli.com/p/b83859395d12498784e1658a076c2b8a/