描述

主要是将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 { arrayBufferToBase64 } from 'sf-utils2'

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

  methods: {
    // 打开ie
    async onChangeFile(e) {
      const file = e.target.files[0]
      const buffer = await file.arrayBuffer()
      this.imgSrc = await arrayBufferToBase64(buffer, { mimeType: file.type })
      console.log('打开控制台查看', this.imgSrc)
    }
  }
}
</script>

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

2.入参说明

参数	说明	类型	是否必填	默认值
buffer	arraybuffer 对象	ArrayBufferLike	是
options	选项	BlobToArrayBufferOptions ，详情见下 👇	否

2.1.BlobToArrayBufferOptions 说明

参数	说明	类型	是否必填	默认值
mimeType	MimeType 类型	string	否
chunkSize	分片大小， 如果不传入那么将整个一起读取，这样可能导致内存过大， 单位 MB，默认是直接切割全部	number	否

3.源码

import { type BlobToArrayBufferOptions } from '@/stream/blobToArrayBuffer.ts'

/**
 * 将 ArrayBuffer 转换为 Base64 字符串（高性能兼容方案）
 * @param buffer - 输入的 ArrayBuffer 或兼容类型（如 Uint8Array.buffer）
 * @param options
 * @returns Promise<string> 解析为 Base64 字符串
 */
async function arrayBufferToBase64(buffer: ArrayBufferLike, options?: BlobToArrayBufferOptions): Promise<string> {
  if (!(buffer instanceof ArrayBuffer)) return Promise.reject('参数必须是 ArrayBuffer 类型')
  const uint8Array = new Uint8Array(buffer)

  const prefix = options?.mimeType ? `data:${options.mimeType};base64,` : ''

  // 回退方案：分块处理避免内存溢出（兼容旧浏览器）
  const CHUNK_SIZE = 8192 // 8KB/块，平衡性能与内存
  let result = ''
  for (let i = 0; i < uint8Array.length; i += CHUNK_SIZE) {
    const chunk = uint8Array.slice(i, i + CHUNK_SIZE)
    result += Array.from(chunk).reduce((data, byte) => data + String.fromCharCode(byte), '')
  }
  return prefix + btoa(result)
}

export default arrayBufferToBase64