上传进度,为啥 onProgress 方法直接 100%,并不是 1,2,3....?

作者站长头像
站长
· 阅读数 5
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个回答
avatar
test
2024-07-01

network里面调一下速度限制测试看看,打印出你的progress看看

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容