由于 React Native 中的 url 不同，Expo 图像选择器无法在网络上显示从移动设备上传的图像

Question

我从网络帐户上传了图片，该图片也显示在手机上，但是当我从手机上传图片时，它无法在网络或任何其他移动设备上显示

因为在数据库中 web 图像 uri 是可读的但移动图像 uri 不可读我的图像选择器代码

const pickImage = async () => {

      // No permissions request is necessary for launching the image library
      let result = await   ImagePicker.launchImageLibraryAsync({
          


        

        mediaTypes: ImagePicker.MediaTypeOptions.All,
       
        base64: true,
        
        
      });

图片从网络上传

从手机上传的图片

Answer 1

您会在网络上看到该文件的 uri 是您的 base64 字段的 base64 前置版本。

在移动设备上，您需要上传而不是使用 fileUri。为了跨平台保持一致，并避免编写重复代码，只需保存 base64 结果即可。

const { base64 } = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        base64: true, 
      });

const base64ToUpload = `data:image/jpeg;base64,${base64}`;

您还应该考虑根据所选文件确定文件类型，因为不能保证它是 jpeg（当然取决于您的实现）。

您遇到问题的原因是网络实现为您提供了文件的 base64 表示，但在移动设备上您获取的是文件在本地存储中的位置，这是两个截然不同的事情。