如何將圖像從 expo-image-picker 保存到 expo-file-system 然后渲染它？

Question

我正在嘗試將選定的圖像存儲在應用程序中，而不是存儲在圖像卷中。

這是我嘗試過的：

    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.

由於這篇文章中的建議不起作用，我的問題可能與我從文件中提取的數據有關。

在 expo-file-system 中存儲和訪問 jpg 文件的正確 api 用法是什么？

Answer 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 }}>

Answer 2

import * as MediaLibrary from "expo-media-library";
import * as FileSystem from "expo-file-system";

<TouchableOpacity onPress={downloadImage}><Text>Download</Text></TouchableOpacity>

const downloadImage = () => {
  
  FileSystem.downloadAsync(
    'http://techslides.com/demos/sample-videos/small.mp4',
    FileSystem.documentDirectory + 'small.mp4'
  )
    .then(({ uri }) => {
      console.log('Finished downloading to ', uri);
      MediaLibrary.saveToLibraryAsync(uri)
    })
    .catch(error => {
      console.error(error);
    });
};