如何使用React Native应用程序中的Expo图像拾取器访问图像的实际(未缓存)位置?

kfgdxczn  于 2023-03-19  发布在  React
关注(0)|答案(1)|浏览(139)

**背景:**我正在使用React Native和Expo托管工作流构建移动的应用程序(目前正在部署到iOS)。
**我想做的事情:**我希望用户能够从媒体库中选择一张图片,或者用相机拍一张照片,然后保存在媒体库中。应用程序应该存储图片的位置,以便用户稍后可以将其上传到服务器。稍后意味着几个小时甚至一天后,所以我需要图片的真实的位置,而不是缓存的位置。
**我已经拥有的:**对于选择图像,我让它按照以下方式工作:

const permissionResponse = await MediaLibrary.requestPermissionsAsync();
if (permissionResponse.granted) {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images
  });

  for (const asset of (result?.assets || [])) {
    const info = await MediaLibrary.getAssetInfoAsync(asset.assetId);
    await storeImageLocation(info.localUri);
  }
}

(其中storeImageLocation是我自己的函数。)

**问题:**为了用照相机拍摄一张照片,将其保存在库中,然后存储实际位置,我从下面的代码开始:

const permission = await MediaLibrary.requestPermissionsAsync();
if (permission.granted) {
  const result = await ImagePicker.launchCameraAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true
  });

  for (const asset of (result?.assets || [])) {
    const savedAsset = await MediaLibrary.createAssetAsync(asset.uri);
    await storeImageLocation(savedAsset.uri);   
  }
}

但是当我关闭应用程序并稍后返回时,我无法访问图像。
我还尝试使用MediaLibrary.getAssetInfoAsync来获得localUri,就像第一种情况一样,使用assetsavedAsset,但无论我尝试什么,都无法使其工作。
有什么线索吗?
或者一些关于iPhone上图像位置如何工作的背景知识?

3qpi33ja

3qpi33ja1#

我解决过类似的问题,在用户选择或拍摄照片且知道照片路径后,将照片复制到应用程序的内部文档目录中。这种方法确保了照片的安全性,不会受到任何第三方的修改或删除,并允许我将来可靠地访问它。
代码如下所示:

export const PHOTOS_FOLDER = `${FileSystem.documentDirectory || ''}photos`

async function initializeFolder() {
    const info = await FileSystem.getInfoAsync(PHOTOS_FOLDER)

    if (info.exists) {
        return Promise.resolve()
    }

    return await FileSystem.makeDirectoryAsync(PHOTOS_FOLDER, { intermediates: true })
}

await initializeFolder()

const key = uuidv4() // any unique identifer will work
const newUri = `${PHOTOS_FOLDER}/${key}.jpg`

const photo: Asset =  // TODO: get it from MediaLibrary / Camera

await FileSystem.copyAsync({ from: photo.uri, to: newUri })

// TODO: save the newUri to some storage so you know where to look later when you actually want to do the upload

请注意,FileSystem.documentDirectory中的文件将一直保留在那里,直到应用将其删除或卸载应用。更多信息:https://docs.expo.dev/versions/latest/sdk/filesystem/#filesystemdocumentdirectory

相关问题