上传进度,为啥 onProgress 方法直接 100%,并不是 1,2,3....?
export interface ProgressCallback {
(progress: number): void;
}
type UploadParams<T extends Record<string, any> = Record<string, any>> = T & {
file: File;
};
// json格式转换为 formdata格式
const formdataify = (params: Record<string, any>) => {
const formData = new FormData();
Object.keys(params).forEach((key) => {
formData.append(key, params[key]);
});
return formData;
};
/**
* 上传,可获取到上传进度
* url 上传地址
* params 上传参数,传入 json 格式 使用 formdataify 自动转成 formdata
* onProgress 上传进度
*/
export class FileUploader {
uploadFile(
url: string,
params: UploadParams,
onProgress?: ProgressCallback
): Promise<Record<string, any>> {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", (event: ProgressEvent) => {
if (event.lengthComputable) {
const progress = Math.round((event.loaded / event.total) * 100);
if (typeof onProgress === "function") {
onProgress(progress);
}
}
});
xhr.addEventListener("load", () => {
if (xhr.status === 200 || xhr.status === 201) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(JSON.parse(xhr.responseText));
}
});
xhr.addEventListener("error", () => {
reject(JSON.parse(xhr.responseText));
});
xhr.open("POST", url);
xhr.send(formdataify(params));
});
}
}
回复
1个回答
test
2024-07-01
在network
里面调一下速度限制测试看看,打印出你的progress
看看
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容