useArrayBuffer

将 ArrayBuffer 对象 和 Base64 字符串 相互转换

何时使用

需要将 ArrayBuffer 和 Base64 相互转换时

API

const { toBase64, toArrayBuffer } = useArrayBuffer();

参数说明

无

返回值说明

返回值	说明	类型
toBase64	arrayBuffer to Base64	(arrayBuffer: ArrayBuffer) => string
toArrayBuffer	base64 to arrayBuffer	(base64: string) => ArrayBuffer

代码演示

React

basic/useArrayBuffer/index

import React from 'react';
import DemoContent from '@src/components/DemoContent';
import { Cell } from '@taroify/core';
import { useArrayBuffer } from 'taro-hooks';

export default () => {
  const { toBase64, toArrayBuffer } = useArrayBuffer();

  const arrayBuffer = new Uint8Array([11, 22, 33]);

  const convertBase64 = toBase64(arrayBuffer);

  const convertArrayBuffer = toArrayBuffer(convertBase64);

  function displayArrayBuffer(showArrayBuffer) {
    return 'Uint8Array(${
      showArrayBuffer.byteLength
    })[${showArrayBuffer.toString()}]';
  }

  return (
    <DemoContent>
      <Cell.Group clickable>
        <Cell
          title="原始ArrayBuffer"
          brief={displayArrayBuffer(arrayBuffer)}
        ></Cell>
        <Cell title="toBase64" brief={convertBase64}></Cell>
        <Cell
          title="toArrayBuffer"
          brief={displayArrayBuffer(convertArrayBuffer)}
        ></Cell>
      </Cell.Group>
    </DemoContent>
  );
};

Vue

basic/useArrayBuffer/index

<template>
  <demo-content>
    <nut-cell
      title="原始ArrayBuffer"
      :sub-title="displayArrayBuffer(arrayBuffer)"
    ></nut-cell>
    <nut-cell title="toBase64" :sub-title="convertBase64"></nut-cell>
    <nut-cell
      title="toArrayBuffer"
      :sub-title="displayArrayBuffer(convertArrayBuffer)"
    ></nut-cell>
  </demo-content>
</template>

<script setup lang="ts">
import { useArrayBuffer } from 'taro-hooks';

const { toBase64, toArrayBuffer } = useArrayBuffer();

const arrayBuffer = new Uint8Array([11, 22, 33]);

const convertBase64 = toBase64(arrayBuffer);

const convertArrayBuffer = toArrayBuffer(convertBase64);

function displayArrayBuffer(arrayBuffer) {
  return 'Uint8Array(${arrayBuffer.byteLength})[${arrayBuffer.toString()}]';
}
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️	✔️