useBase64

类别

Utilities

导出体积

771 B

上次更改

last week

响应式的 Base64 转换。支持 plain text，buffer，files，canvas，objects，maps，sets 和 images。

示例

源码

文本输入

Base64

Buffer 输入

new ArrayBuffer(1024)

Base64

文件选择

Base64

图片输入

Base64

用法

TypeScript

import { useBase64 } from '@vueuse/core'
import { Ref, ref } from 'vue'

const text = ref('')

const { base64 } = useBase64(text)

import { useBase64 } from '@vueuse/core'
import { ref } from 'vue'
const text = ref('')
const { base64 } = useBase64(text)

如果你使用对象、数组、Map 或 Set，你可以在选项中提供序列化器。否则，你的数据将使用默认的序列化器进行序列化。对象和数组将通过 JSON.stringify 转换为字符串。Map 和 Set 将在转换为对象和数组之后再进行字符串化。

类型声明

显示类型声明

typescript

export interface UseBase64Options {
  /**
   * Output as Data URL format
   *
   * @default true
   */
  dataUrl?: boolean
}
export interface ToDataURLOptions extends UseBase64Options {
  /**
   * MIME type
   */
  type?: string | undefined
  /**
   * jpeg 或 webp 的图像质量
   */
  quality?: any
}
export interface UseBase64ObjectOptions<T> extends UseBase64Options {
  serializer?: (v: T) => string
}
export interface UseBase64Return {
  base64: Ref<string>
  promise: Ref<Promise<string>>
  execute: () => Promise<string>
}
export declare function useBase64(
  target: MaybeRefOrGetter<string>,
  options?: UseBase64Options,
): UseBase64Return
export declare function useBase64(
  target: MaybeRefOrGetter<Blob>,
  options?: UseBase64Options,
): UseBase64Return
export declare function useBase64(
  target: MaybeRefOrGetter<ArrayBuffer>,
  options?: UseBase64Options,
): UseBase64Return
export declare function useBase64(
  target: MaybeRefOrGetter<HTMLCanvasElement>,
  options?: ToDataURLOptions,
): UseBase64Return
export declare function useBase64(
  target: MaybeRefOrGetter<HTMLImageElement>,
  options?: ToDataURLOptions,
): UseBase64Return
export declare function useBase64<T extends Record<string, unknown>>(
  target: MaybeRefOrGetter<T>,
  options?: UseBase64ObjectOptions<T>,
): UseBase64Return
export declare function useBase64<T extends Map<string, unknown>>(
  target: MaybeRefOrGetter<T>,
  options?: UseBase64ObjectOptions<T>,
): UseBase64Return
export declare function useBase64<T extends Set<unknown>>(
  target: MaybeRefOrGetter<T>,
  options?: UseBase64ObjectOptions<T>,
): UseBase64Return
export declare function useBase64<T>(
  target: MaybeRefOrGetter<T[]>,
  options?: UseBase64ObjectOptions<T[]>,
): UseBase64Return