描述

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

1.示例

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

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

export default {
  data() {
    return {}
  },

  methods: {
    // 打开ie
    async onChangeFile(e) {
      const file = e.target.files[0]
      this._arrayBuffer = await blobToArrayBuffer(file, { mimeType: file.type })
      console.log('blobToArrayBuffer转化输出结果 ===>', this._arrayBuffer)
      this.$message.warning(`打开控制台查看`)
    }
  }
}
</script>

2.入参说明

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

2.1.BlobToArrayBufferOptions 说明

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

`MimeType`类型，点击查看

export interface BlobToArrayBufferOptions {
  /** 分片大小， 如果不传入那么将整个一起读取，这样可能导致内存过大， 单位MB */
  chunkSize?: number

  /** */
  mimeType?: string
}

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

3.源码

import isFunction from '@/base/isFunction'

export interface BlobToArrayBufferOptions {
  /** 分片大小， 如果不传入那么将整个一起读取，这样可能导致内存过大， 单位MB */
  chunkSize?: number

  /** */
  mimeType?: string
}

/**
 * blob 转 arrayBuffer
 * @param {Blob} blob
 * @param options
 */
async function blobToArrayBuffer(blob: Blob, options?: BlobToArrayBufferOptions): Promise<ArrayBuffer> {
  if (!(blob instanceof Blob)) return Promise.reject('传入的参数blob非Blob对象')

  // 读取全部
  if (!options?.chunkSize) return await _singleBlobToArrayBuffer(blob)

  // 分片读取
  const ONE_MB = 1024 * 1024
  const CHUNK_SIZE = +options?.chunkSize * ONE_MB
  const chunkArrayBuffers = [] as ArrayBuffer[]
  for (let start = 0; start < blob.size; start += CHUNK_SIZE) {
    const chunk = blob.slice(start, start + CHUNK_SIZE)
    const chunkBuffer = await _singleBlobToArrayBuffer(chunk)
    chunkArrayBuffers.push(chunkBuffer)
  }
  return _mergeArrayBuffers(chunkArrayBuffers)
}

/**
 * 单个 blob 转 arrayBuffer
 * @param blob
 */
async function _singleBlobToArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
  if (!(blob instanceof Blob)) return Promise.reject('传入的参数blob非Blob对象')
  if (isFunction(blob.arrayBuffer)) {
    return await blob.arrayBuffer()
  }
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result as ArrayBuffer)
    reader.onerror = e => reject(e)
    reader.readAsArrayBuffer(blob)
  })
}

/**
 * 合并 ArrayBuffer 的函数
 * @param buffers
 */
function _mergeArrayBuffers(buffers: ArrayBuffer[]) {
  // 计算总长度
  let totalLength = buffers.reduce((sum, buf) => sum + buf.byteLength, 0)
  // 创建新缓冲区
  const mergedBuffer = new ArrayBuffer(totalLength)
  const mergedUint8 = new Uint8Array(mergedBuffer)

  // 逐块复制数据
  let offset = 0
  for (const buffer of buffers) {
    const chunkView = new Uint8Array(buffer)
    mergedUint8.set(chunkView, offset)
    offset += chunkView.length
  }
  return mergedBuffer
}
export default blobToArrayBuffer