如何将图像从 expo-image-picker 保存到 expo-file-system 然后渲染它？答案

【问题标题】：How do I save an image from expo-image-picker to expo-file-system and then render it?如何将图像从 expo-image-picker 保存到 expo-file-system 然后渲染它？
【发布时间】：2020-10-26 23:59:34
【问题描述】：

我正在尝试将选定的图像存储在应用程序中，而不是存储在图像卷中。

这是我尝试过的：


    await FileSystem.downloadAsync(
      imageUri, // the image uri from expo-image-picker
      FileSystem.documentDirectory + `${uuid}-image.jpg`
    )
      .then(({ uri }) => {
        console.log("Finished downloading to ", uri);
      })
      .catch((error) => {
        console.error(error);
      });

我收到错误：

Unable to download file: Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL"

我也试过了：

    await FileSystem.writeAsStringAsync(
      FileSystem.documentDirectory + `spotPhotos/${uuid}-image.jpg`,
      image.base64
    );

当我尝试在 ImageBackground 组件中使用图像时，这似乎成功地保存了图像，但是我没有成功。


<ImageBackground
        source={'data:image/png;base64'+imageFile}
        style={{ borderRadius: 5, borderColor:  'black', width: 100, flex: 1, resizeMode: "cover", justifyContent: "center" }}
      >
...
</ImageBackground>

出现无法读取文件夹的错误：

getFile -> err [Error: File '/var/mobile/Containers/Data/Application/.../spotPhotos' could not be read.]

我可以使用 uri 保存图像文件本身吗？我需要将其转换为 base64 并返回吗？

看来我已经能够成功保存使用以下编码的base64图像了：

    await FileSystem.writeAsStringAsync(
      FileSystem.documentDirectory + `spotPhotos/${uuid}-imagelocation.jpg`,
      image.base64
    );

并通过以下方式访问编码图像：

 let imageFile = async () => {
    let uri = FileSystem.documentDirectory + "spotPhotos/" + spot.imageloc;
    let options = { encoding: FileSystem.EncodingType.Base64 };
   let base64 =  await FileSystem.readAsStringAsync(uri, options);
   return (base64);
  }

当我 console.log imageFile 我得到一个巨大的字符墙，然后崩溃 Vscodium，即使我尝试使用 string.prototype.slice() 记录前几个字符，所以我无法检查它，但我认为它是 base64 编码文件。

当我尝试将返回的值引用为 Image 或 ImageBackground 组件的来源时：

<Image style={{width: 50, height: 50}} source={{imageFile}}/>
// or 

<Image style={{width: 50, height: 50}} source={{imageFile()}}/>

// or 

<Image style={{width: 50, height: 50}} source={{uri:`data:image/png;base64,${imageFile}`}}/>
// or 

<Image style={{width: 50, height: 50}} source={{uri:`data:image/jpg;base64,${imageFile}`}}/>

我收到警告消息：invalid prop 'source' supplied to 'Image'。

我也收到一条错误消息

Error: You attempted to set the key `_65` with the value of 1 on an object 
that is meant to be immutable and has been frozen.

由于this post 中的建议不起作用，我的问题可能与我从文件中提取的数据有关。

在 expo-file-system 中存储和访问 jpg 文件的正确 api 用法是什么？

【问题讨论】：

我仍然没有任何运气让这个功能正常运行。甚至制作一个只有这个功能的孤立的虚拟应用程序。
看看https://forums.expo.io/t/how-to-show-image-from-filesystem/30920。你确定你正确使用writeAsStringAsync 吗？这也需要一个选项参数，要求您指定编码。

标签： javascript image react-native mobile expo

【解决方案1】：

我使用以下代码完成了这项工作：

useEffect(() => {
    if (data[spotIndex].image) {
      imageFile();
    }
  }, [location]);

  let imageFile = async () => {
    if (data[spotIndex].image.length > 0) {
      let uri = FileSystem.documentDirectory + data[spotIndex].image;
      let getInfo = await FileSystem.getInfoAsync(uri);
      getInfo && console.log(getInfo);
      let options = { encoding: FileSystem.EncodingType.Base64 };
      let base64 = await FileSystem.readAsStringAsync(uri, options);
      setBase64Val("data:image/jpeg;base64," + base64);
    }
  };

<ImageBackground source={{ uri: base64Val }}>

【讨论】：