reactjs - React-Native Expo 将图像从缓存移动到应用程序文件夹错误

Question

我真的很难找到我哪里出错了。我正在尝试将选取的（ImagePicker）图像从FileSystem.cacheDirectory名为images/. images/我使用创建了一个目录，FileSystem.makeDirectoryAsync但是在尝试将拾取的图像移动到该目录时出现错误。请有人可以帮助我我真的很挣扎

预期结果

图像成功移动到images/目录

实际结果

[Unhandled promise rejection: Error: File 'file:///var/mobile/Containers/Data/Application/318CFCE4-16DF-44DD-92B3-39DECA61EA14/Library/Caches/ExponentExperienceData/%2540user%252FtestApp/ImagePicker/ECD218AE-3DD3-429F-B1F5-469DA1AC661C.jpg' could not be moved to 
'file:///var/mobile/Containers/Data/Application/318CFCE4-16DF-44DD-92B3-39DECA61EA14/Documents/ExponentExperienceData/%2540user%252FtestApp/images/ECD218AE-3DD3-429F-B1F5-469DA1AC661C.jpg/'.]

这是我的代码：

import React, { useEffect, useState } from "react";
import {Text,View,TouchableOpacity,Alert,} from "react-native";
import * as ImagePicker from "expo-image-picker";
import * as Permissions from "expo-permissions";
import * as FileSystem from "expo-file-system";

const ImageCard = (props) => {
  const { handlePickedImage } = props;
  const [image, setImage] = useState("");
  // Create any app folders that don't already exist
export const checkAndCreateFolder = async folder_path => {
    const folder_info = await FileSystem.getInfoAsync(folder_path);
    if (!Boolean(folder_info.exists)) {
      // Create folder
      console.log("checkAndCreateFolder: Making " + folder_path);
      try {
        await FileSystem.makeDirectoryAsync(folder_path, {
          intermediates: true
        });
      } catch (error) {
        // Report folder creation error, include the folder existence before and now
        const new_folder_info = await FileSystem.getInfoAsync(folder_path);
        const debug = `checkAndCreateFolder: ${
          error.message
        } old:${JSON.stringify(folder_info)} new:${JSON.stringify(
          new_folder_info
        )}`;
        console.log(debug);
      }
    }
  };

  const veryfiyPermissons = async () => {
    const result = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    if (result.status !== "granted") {
      Alert.alert(
        "Insufficient permissions",
        "You need to grant permissions to access Camera Roll",
        [{ text: "Okay" }]
      );
      return false;
    }
    return true;
  };

  const selectImageHandler = async () => {
    const hasPermisson = await veryfiyPermissons();
    if (!hasPermisson) {
      return;
    }
    const image = await ImagePicker.launchImageLibraryAsync({
      quality: 0.5,
    });
    if (image.cancelled) {
      randomImage;
    } else {
      let localUri = image.uri;
      let localUriNamePart = localUri.split("/");
      const fileName = localUriNamePart[localUriNamePart.length - 1];
      const images_folder =  `${FileSystem.documentDirectory + 'images/'}`
      checkAndCreateFolder(images_folder);
      const setTheFile = `${images_folder + `${fileName}/`}`

      await FileSystem.moveAsync({
        from: localUri,
        to: newLocation
      }).then((i) => {
        setImage(setTheFile);
        handlePickedImage(setTheFile);
      })
    }
  };
  return (
    <View>
          <TouchableOpacity onPress={selectImageHandler}>
              <Text>Add Photo</Text>
          </TouchableOpacity>
    </View>
  );
};
export default ImageCard;

标签： reactjsreact-nativeexpo