Eson Wong's Blog

编程笔记,投资记录, 读书总结, 生活心得

0%

fetch 上传进度的替代发方案

fetch 无法获取上传文件的进度

目前 fetch 没有类似 XMLHttpRequest 实例的 upload.onprogress, 所以需要现实上传进度的话需要使用 XMLHttpRequest 来上传文件。
相关讨论

使用 XMLHttpRequest 替代

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
await new Promise((resolve, reject) => {
const xhr = (this.xhr = new XMLHttpRequest());
xhr.open("put", uploadUrl);
xhr.setRequestHeader("auth", "xxx");
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
console.log("上传进度", event.loaded / event.total);
}
};
xhr.onerror = () => {
reject("上传失败!");
};
xhr.onabort = () => {
reject("已取消上传");
};
xhr.upload.onabort = () => {
reject("已取消上传");
};
xhr.onload = () => {
if (xhr.status === 200) {
resolve();
}
};
xhr.send(file);
}).catch((e) => {
throw new Error(e);
});

参考

欢迎关注我的其它发布渠道