Reference version

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Expo Blob

一个符合 Web 标准的 Blob 实现,适用于 React Native。

Android
iOS
Web
Included in Expo Go

expo-blob 为 React Native 提供了符合 Web 标准的 Blob 实现,性能更优,并且可在所有平台上保持一致的工作方式。与从 react-native 导出的实现相比,它更加可靠;react-native 中的 Blob 在 slice() 方法和其他 Web API 功能方面存在限制

安装

Terminal
- npx expo install expo-blob
- yarn expo install expo-blob
- pnpm expo install expo-blob
- bun expo install expo-blob

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

基本 Blob 创建

import { Blob } from 'expo-blob'; // Create an empty blob const emptyBlob = new Blob(); // Create a blob from text const textBlob = new Blob(['Hello, World!'], { type: 'text/plain' }); // Create a blob from binary data const binaryBlob = new Blob([new Uint8Array([1, 2, 3, 4])], { type: 'application/octet-stream', }); // Create a blob from mixed content const mixedBlob = new Blob( [ 'Text content', new Uint8Array([65, 66, 67]), // ABC in ASCII 'More text', ], { type: 'text/plain' } );

Blob 属性

const blob = new Blob(['Hello, World!'], { type: 'text/plain' }); console.log(blob.size); // 13 (bytes) console.log(blob.type); // "text/plain"

读取 Blob 内容

const blob = new Blob(['Hello, World!'], { type: 'text/plain' }); // Read as text const text = await blob.text(); console.log(text); // "Hello, World!" // Read as bytes const bytes = await blob.bytes(); console.log(bytes); // Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100, 33] // Read as ArrayBuffer const arrayBuffer = await blob.arrayBuffer(); console.log(arrayBuffer); // ArrayBuffer(13)

切分 Blob

const blob = new Blob(['Hello, World!'], { type: 'text/plain' }); // Slice from position 0 to 5 const slice1 = blob.slice(0, 5); console.log(await slice1.text()); // "Hello" // Slice from position 7 to end const slice2 = blob.slice(7); console.log(await slice2.text()); // "World!" // Slice with custom type const slice3 = blob.slice(0, 5, 'text/html'); console.log(slice3.type); // "text/html"

流式处理

const blob = new Blob(['Large content...'], { type: 'text/plain' }); // Create a readable stream const stream = blob.stream(); const reader = stream.getReader(); // Read chunks while (true) { const { done, value } = await reader.read(); if (done) break; console.log('Chunk:', value); }

API

Classes

Blob

Android
iOS
Web

Blob Properties

size

Android
iOS
Web
Read only • Type: number

The size of the Blob in bytes.

type

Android
iOS
Web
Read only • Type: string

The MIME type of the Blob, or the empty string if the type cannot be determined.

Blob Methods

arrayBuffer()

Android
iOS
Web

Promise resolving to the Blob's binary data as an ArrayBuffer.

bytes()

Android
iOS
Web
Returns:
Promise<Uint8Array<ArrayBufferLike>>

Promise resolving to the Blob's binary data as a Uint8Array.

slice(start, end, contentType)

Android
iOS
Web
ParameterTypeDescription
start(optional)number

The starting byte index (inclusive) represented as a signed 32 bit integer (up to 2^31 - 1).

end(optional)number

The ending byte index (exclusive) represented as a signed 32 bit integer (up to 2^31 - 1).

contentType(optional)string

The MIME type of the new Blob. If not provided, defaults to an empty string.


Returns:
Blob

A new Blob object containing the data in the specified range of bytes of the source Blob.

stream()

Android
iOS
Web

A ReadableStream of the Blob's data.

text()

Android
iOS
Web
Returns:
Promise<string>

Promise that resolves with the entire contents of the Blob as a UTF-8 string.

Types

BlobPart

Android
iOS
Web

Literal type: union

Represents a part of a Blob. Can be a string, ArrayBuffer, ArrayBufferView, or another Blob.

Acceptable values are: string | ArrayBuffer | ArrayBufferView | Blob