React Native Blob不是一个函数

Question

我试图使用LaunchImageLibrary在React Native中创建一个blob。我的基本组件如下:

import React from 'react'
import { Button, SafeAreaView } from 'react-native'
import { launchImageLibrary } from 'react-native-image-picker'

const Home = () => {
const getImageFromLibrary = async () => {
const result = await launchImageLibrary()
const { uri } = result.assets[0]
console.log(uri)
// result: file:///Users/myMac/Library/Developer/CoreSimulator/Devices/7287EC81-054B-401E-942D-3978C6E308AF/data/Containers/Data/Application/6098A1CE-D49C-4ECD-8396-29BD0E8C598D/tmp/DBCF7839-8076-4D9A-8773-0F701EB58E0E.jpg
const fetchedFile = await fetch(uri)
console.log('FETCHED: ', fetchedFile)
const blob =  await fetchedFile.blob()
console.log('BLOB: ', blob)
}
return (
<SafeAreaView>
<Button onPress={getImageFromLibrary} title="Get from library" />    
</SafeAreaView>
)
}
export default Home

我得到以下错误:

Unhandled Promise Rejection (id: 1):
TypeError: fetchedFile.blob is not a function

我看到其他人能够使用fetchedFile.blob()没有任何问题，我不知道为什么我有问题。我使用的是M1 mac，运行iOS 15.5模拟器(iPhone13)，通过npx使用create-react-app .

Answer 1

在某些情况下，基于whatwg-fetch的React Native Fetch API实现在处理像位图文件这样的大数据块时感觉有bug。

另一种解决方案是使用XMLHttpRequestAPI。

const getImageFromLibrary = async () => {
const result = await launchImageLibrary();
const { uri } = result.assets[0];
console.log(uri);
// result: file:///Users/myMac/Library/Developer/CoreSimulator/Devices/7287EC81-054B-401E-942D-3978C6E308AF/data/Containers/Data/Application/6098A1CE-D49C-4ECD-8396-29BD0E8C598D/tmp/DBCF7839-8076-4D9A-8773-0F701EB58E0E.jpg
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", uri, true);
xhr.send(null);
});
// Upload BLOB data to remote server...
// We're done with the blob, close and release it
blob.close();
};