React Native expo-image-picker 不适用于所有手机答案

【问题标题】：React Native expo-image-picker does not working all phoneReact Native expo-image-picker 不适用于所有手机
【发布时间】：2022-01-27 22:45:48
【问题描述】：

我正在使用 expo-image-picker，如果我在 android 模拟器中选择一个图像并保存它，当我使用我的真实设备进入程序时，我看不到我从模拟器中保存的图像。换句话说，无论我用哪个设备保存图片，它都只会出现在那个设备上。它不会出现在其他设备上。我该如何解决这个问题？

我正在使用 API 进行数据库操作（使用 axios）

这是代码

const PickImage = async () => {
allowPhotoRequests()

let result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.All,
  allowsEditing: true,
  aspect: [4, 3],
  quality: 1,
  base64: true
})

if (!result.cancelled) {
   setImage(result.uri) // I think I have to do something here
}

提交代码：

 const addPet = async () => {
try {
  petApi.post('/', {
    userId: userId,
    Age: age,
    Weight: weight,
    userName: currentUser,
    userPhone: currentUserPhone,
    petImage: image,
    city: city,
    district: district
  })
    .then(function (response) {
      alert('Success!')
    })
}
catch (error) {
  console.log(error);
}

}

图像输出示例：

file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540yas1nkiziltas%252FPettyApp/ImagePicker/cb2923b3-5de8-4692-8244-0ce9b987001a.jpg

【问题讨论】：

标签： react-native axios expo

【解决方案1】：

在使用这个 Expo 时，有两种方法可以解决这个问题：

提交图片数据为base64
查看后端 API 支持BLOB，您可以使用代码获取BLOB 下面。

 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", [YOUR_FILE_PATH_URI], true);
    xhr.send(null);
  });

// Use blob after fetch
console.log(blob)

// We're done with the blob, close and release it
blob.close();

【讨论】：

我将在哪里使用用 blob 编写的代码？如果您能回复我上面给出的代码，我将不胜感激。 @BYIRINGIRO 伊曼纽尔
大多数云对象存储提供商（AWS S3、Firebase Storage、...）接受文件上传为blob，您可以指定任何类型的图像（jpg、mp4 或 pdf）的文件扩展名。如果您不使用这些存储提供程序，您应该简单地使用base64
我在 imagepicker 中执行 'base64:true'，正如我在上面的代码中提到的，但结果是一样的。除此之外，还有其他方法可以使用 base64 吗？
同你访问result.uri，你可以访问result.base64if (!result.cancelled) { console.log(result.base64) setImage(result.uri) // I think I have to do something here }
我可以在执行 console.log(result.base64) 时看到翻译后的数据，但是在尝试将图像查看为。有什么问题？

【解决方案2】：

您将 petImage 保存在您的 patApi 数据库中以获取特定的 userId。在任何设备上，要获取该图像，您需要再次获取此数据，我没有看到您在发布后获取此图像数据。这是您缺少的部分。

【讨论】：

我做了 { image ? ( ) : ( ) }