useBase64
響應式 base64 轉換。支援純文字、緩衝區、檔案、畫布、物件、Map、Set 和圖片。
範例
文字輸入
Base64
緩衝區輸入
new ArrayBuffer(1024)
Base64
檔案輸入
Base64
圖片輸入
Base64
用法
ts
import { useBase64 } from '@vueuse/core'
import { shallowRef } from 'vue'
const text = shallowRef('')
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
/**
* Image quality of jpeg or webp
*/
quality?: any
}
export interface UseBase64ObjectOptions<T> extends UseBase64Options {
serializer?: (v: T) => string
}
export interface UseBase64Return {
base64: ShallowRef<string>
promise: ShallowRef<Promise<string>>
execute: () => Promise<string>
}
export declare function useBase64(
target: MaybeRefOrGetter<string | undefined>,
options?: UseBase64Options,
): UseBase64Return
export declare function useBase64(
target: MaybeRefOrGetter<Blob | undefined>,
options?: UseBase64Options,
): UseBase64Return
export declare function useBase64(
target: MaybeRefOrGetter<ArrayBuffer | undefined>,
options?: UseBase64Options,
): UseBase64Return
export declare function useBase64(
target: MaybeRefOrGetter<HTMLCanvasElement | undefined>,
options?: ToDataURLOptions,
): UseBase64Return
export declare function useBase64(
target: MaybeRefOrGetter<HTMLImageElement | undefined>,
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
原始碼
貢獻者
變更日誌
v12.8.0
on 3/5/2025v12.3.0
on 1/2/202559f75
- feat(toValue): deprecate toValue
from @vueuse/shared
in favor of Vue's nativev12.1.0
on 12/22/2024v12.0.0-beta.1
on 11/21/2024v10.0.0-beta.5
on 4/13/2023cb644
- refactor!: remove isFunction
and isString
utilsv10.0.0-beta.4
on 4/13/20234d757
- feat(types)!: rename MaybeComputedRef
to MaybeRefOrGetter
0a72b
- feat(toValue): rename resolveUnref
to toValue