获取上传图片进度百分比

获取上传图片进度百分比

// 判断是否是图片
export function fileIsImg(fileName: string) {
  const strFilter = '.jpeg|.gif|.jpg|.png|.bmp|.pic|.svg|.psd|.dxf|.swf|.webp|';
  if (fileName.indexOf('.') > -1) {
    const p = fileName.lastIndexOf('.');
    let strPostfix = fileName.substring(p, fileName.length) + '|';
    strPostfix = strPostfix.toLowerCase();
    if (strFilter.indexOf(strPostfix) > -1) {
      return true;
    }
  }
  return false;
}

// 上传文件
export const uploadFile = (file: File, fileName: string, cb?: Function) => {
  return new Promise<{ code: string }>((resolve, reject) => {
    const type = fileIsImg(fileName) ? 'img' : '其他类型';
    const data = new FormData();
    const xhr = new XMLHttpRequest();
    if (cb && typeof cb === 'function') {
      xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
          const percentComplete = (event.loaded / event.total) * 100; // 上传进度百分比
          (cb as Function)(percentComplete.toFixed(2));
        }
      };
    }
    data.append('fileType', type);
    data.append('fileName', fileName || file.name);
    data.append('file', file);
    const { token } = getToken();
    xhr.open('post', '上传图片接口');
    xhr.setRequestHeader('blade-auth', `bearer ${token}`);
    xhr.send(data);
    xhr.onreadystatechange = () => {
      if (xhr.status === 200) {
        if (xhr.readyState === 4) {
          if (xhr.responseText) {
            const result = JSON.parse(xhr.responseText).data;
            return resolve(result);
          }
          return reject('上传失败！');
        }
      } else {
        return reject('上传失败！');
      }
    };
  });
};