描述

主要是将ArrayBuffer转化为Base64 v3.3.2+

1.示例

<template>
  <div class="col-md-9 col-sm-12">
    <input type="file" @change="onChangeFile" accept="image/*" />
    <img :src="imgSrc" alt="" />
  </div>
</template>

<script>
import { base64ToBlob } from 'sf-utils2'

export default {
  data() {
    return {
      imgSrc: ''
    }
  },

  methods: {
    // 打开ie
    async onChangeFile(e) {
      const file = e.target.files[0]
      const fileReader = new FileReader()
      fileReader.readAsDataURL(file)
      fileReader.onload = async () => {
        const buffer = await file.arrayBuffer()
        if (this._blob) window.URL.revokeObjectURL(this._blob)
        this._blob = await base64ToBlob(fileReader.result, { mimeType: file.type })
        this.imgSrc = window.URL.createObjectURL(this._blob)
        console.log('打开控制台查看', this.imgSrc)
      }
    },

    beforeDestroy() {
      if (this._blob) window.URL.revokeObjectURL(this._blob)
    }
  }
}
</script>

显示代码 复制代码 复制代码

输出结果，点击查看

• 

2.入参说明

参数	说明	类型	是否必填	默认值
base64	base64	string	是
options	选项	TBaseBlobArrayBufferTransferOptions ，详情见下 👇	否

2.1.TBaseBlobArrayBufferTransferOptions 说明

参数	说明	类型	是否必填	默认值
mimeType	MimeType 类型	string	否

`MimeType`类型，点击查看

• 

3.源码

import type { TBaseBlobArrayBufferTransferOptions } from '@/_types/_helperTreeBaseType.ts'
import base64ToArrayBuffer from '@/stream/base64ToArrayBuffer.ts'

/**
 * 将Base64字符串转换为Blob对象（自动提取MIME类型）
 * @param {string} base64 - 包含前缀的Base64字符串（如 "data:image/png;base64,..."）
 * @param options
 * @returns {Blob}
 */
async function base64ToBlob(base64: string, options?: TBaseBlobArrayBufferTransferOptions): Promise<Blob> {
  const arrayBuffer = await base64ToArrayBuffer(base64, options)
  // 4. 创建Blob对象
  return new Blob([arrayBuffer], { type: options?.mimeType || arrayBuffer['mimeType'] })
}

export default base64ToBlob