将后端返回的二进制png、jpeg、svg等接收并显示到页面上

工作中经常会遇到有后端同学将png、jpeg、svg此类文件以二进制文件流形式的文件传给前端，而处理的时候可烦了，所以汇总以下经验，首先这个是后端给的接口，

我们需要处理一下，加上 responseType: "blob" ，将文件流转为blob格式，保证之后可以用常规前端方式处理图片文件：

举个例子png的图片在接口中是这样的

svg的则是这样的

控制台打印以下统统转为blob格式的：

保证接口可以正常后，咱们开始做处理工作，下面的图片是获取开始菜单图标设置1的代码：

// 获取数据
const searchBackgroundImageFn = async (type?: string) => {
  loading.value = true;
  const res = await searchBackgroundImage({ type: "0" });
  // 桌面壁纸
  if (type !== "add") bgImgsData.value = [];
  if (type !== "add") srcList.value = [];
  if (!res?.length) loading.value = false;
  await res?.forEach(async (item) => {
    const res = await downloadFile(item.fileId);
    const imgType = extractFileType(res?.headers["content-disposition"]);
    console.log("res",res);
    // 将后端返回的svg转为blob格式然后转为可展示的url type: 'image/svg+xml'很关键
    // const blob = new Blob([res], { type: "image/svg+xml" });
    // const blob = new Blob([res], { type: "image/png" });
    // const blob = new Blob([res], { type: "image/jpeg" });
    const blob = new Blob([res.data], { type: getFileContentType(imgType) });
    blobToBase64(blob).then((res1) => {
      if (type === "add") {
        if (!bgImgsData.value.some((i) => i.id === item.id)) {
          bgImgsData.value.unshift({
            ...item,
            imgUrl: res1,
            id: item.id,
          });
          srcList.value.unshift(res1);
        }
      } else {
        if (!bgImgsData.value.some((i) => i.id === item.id)) {
          bgImgsData.value.push({
            ...item,
            imgUrl: res1,
            id: item.id,
          });
          srcList.value.push(res1);
        }
      }
    });
    setTimeout(
      () => {
        loading.value = false;
      },
      bgImgsData.value?.length >= 5 ? 4000 : 1500
    );
  });
};

// 从请求头headers["content-disposition"]字符串中提取出文件类型
export function extractFileType(str) {
  const regex = /\.(svg|png)$/i;
  const match = str.match(regex);
  if (match) {
    return match[0].substring(1);
  } else {
    return null;
  }
}

export function getFileContentType(fileType) {
  if (fileType === "png") {
    return "image/png";
  } else if (fileType === "jpeg" || fileType === "jpg") {
    return "image/jpeg";
  } else if (fileType === "svg") {
    return "image/svg+xml";
  } else {
    return "image/png";
  }
}

// 将blob的格式转化为base64格式
export const blobToBase64 = (blob) => {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      resolve(e.target.result);
    };
    // readAsDataURL
    fileReader.readAsDataURL(blob);
    fileReader.onerror = () => {
      reject(new Error('blobToBase64 error'));
    };
  });
}

以上只是粗略记一下怕自己平时忘记，有需要交流的同学可以留言哦