我正在try 将图像转换为BLOB,以便将其上传到AWS S3存储.我需要在使用EXPO-IMAGE-PICTER Select 图像后将图像转换为BLOB,但它会导致以下错误.

ERROR RangeError: Failed to construct 'Response': The status provided (0) is outside the range [200, 599]., js engine: hermes

这就是我目前的情况:

import { Button, StyleSheet, Text, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker'
export default function App() {
  const PickImage = async()=>{
    let result = await ImagePicker.launchImageLibraryAsync({
      quality:1,
      mediaTypes:ImagePicker.MediaTypeOptions.Images,
    })
    if(!result.canceled){
      let response = await fetch(result.assets[0].uri);
      let blob = await response.blob();
      
      //code to upload image
    }
  }
  return (
    <View style={styles.container}>
      <Button onPress={PickImage} title='TEST'/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

FETCH STSTIME导致错误. let response = await fetch(result.assets[0].uri);

expo error

我试着在expo 的零食中建造它,它运行得很好.我没有收到任何错误.但它在我的本地设置上崩溃了.

推荐答案

我开始面对这个问题时,我更新了我的安卓目标SDK版本到33,以符合新的Google Play规则.

按照提供的答案,here为我解决了这个问题.以下是答案中提到的util函数,但带有一些解释性注释:

/**
 * Function to convert a URI to a Blob object
 * @param {string} uri - The URI of the file
 * @returns {Promise} - Returns a promise that resolves with the Blob object
 */
export function uriToBlob(uri: string): Promise<Blob> {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    // If successful -> return with blob
    xhr.onload = function () {
      resolve(xhr.response);
    };

    // reject on error
    xhr.onerror = function () {
      reject(new Error('uriToBlob failed'));
    };

    // Set the response type to 'blob' - this means the server's response 
    // will be accessed as a binary object
    xhr.responseType = 'blob';

    // Initialize the request. The third argument set to 'true' denotes 
    // that the request is asynchronous
    xhr.open('GET', uri, true);

    // Send the request. The 'null' argument means that no body content is given for the request
    xhr.send(null);
  });
};

该函数的工作方式是使用XMLHttpRequestAPI向文件URI发送HTTP GET请求,请求文件数据.XMLHttpRequest.ResponseType属性被设置为‘Blob’,因此XMLHttpRequest的响应是表示文件数据的Blob.

XMLHttpRequestAPI是一个较低级别的API,可以对请求和响应进行更细粒度的控制.

正如在链接的回答中提到的,FETCH没有处理本地文件URL的好方法(通常在Reaction Native中使用),但XMLHttpRequest可以更优雅地处理这些URL.

Javascript相关问答推荐

为什么有些库公开了执行相同任务的方法,但每个方法都处于同步/同步上下文中?

reaction如何在不使用符号的情况下允许多行返回?

容器如何更改默认插槽中子项的显示?

如何修复我的js构建表每当我添加一个额外的列作为它的第一列?

并不是所有的iframe都被更换

在JS中拖放:检测文件

这个值总是返回未定义的-Reaction

如何在我的Next.js项目中.blob()我的图像文件?

如何使用基于promise (非事件emits 器)的方法来传输数据?

有效路径同时显示有效路径组件和不存在的路径组件

expo 联系人:如果联系人的状态被拒绝,则请求访问联系人的权限

Reaction即使在重新呈现后也会在方法内部保留局部值

Reaction useState和useLoaderData的组合使用引发无限循环错误

重新呈现-react -筛选数据过多

select 2-删除js插入的项目将其保留为选项

在ChartJS中使用spanGaps时,是否获取空值的坐标?

rxjs在每次迭代后更新数组的可观察值

使用Java脚本替换字符串中的小文本格式hashtag

在此div中添加一个类,并在一段时间后在Java脚本中将其删除

相对于具有选定类的不同SVG组放置自定义工具提示