前端 base64显示 预览 下载

前言

• 后端直接返回了图片的base64编码

图片显示和预览

      <el-image
        fit="scale-down"
        style="width: 300px; height: 180px"
        :src="imgBase64A"
        :preview-src-list="srcList"
      >
      </el-image>

  /**
     * base64转blob
     * 原理：利用URL.createObjectURL为blob对象创建临时的URL
     */
    base64ToBlob(urlData, type) {
      let arr = urlData.split(",");
      let mime = arr[0].match(/:(.*?);/)[1] || type;
      // 去掉url的头，并转化为byte
      let bytes = window.atob(arr[1]);
      // 处理异常,将ascii码小于0的转换为大于0
      let ab = new ArrayBuffer(bytes.length);
      // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
      let ia = new Uint8Array(ab);
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], {
        type: mime
      })