由于 React Native 中的 url 不同，Expo 图像选择器无法在 Web 上显示从 Mobile 上传的图像

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（当然取决于您的实现）。

您遇到问题的原因是 Web 实现为您提供了文件的 base64 表示，但在移动设备上，您在本地存储中获取文件的位置，这是两个非常不同的东西。