React Native Expo：将 Expo ImagePicker 图像保存到本地文件夹时遇到问题

Question

我正在尝试保存用户从手机上传或使用相机拍摄的图像。到目前为止，我可以从相机或照片库中获取图像并获取文件的 URI。但是，当我尝试将文件保存到应用程序中的本地文件夹（图像）时，我遇到了问题。

import * as FileSystem from 'expo-file-system';

const FormSubmit = ({navigation, route}) => {
      const [image, setImage] = useState(null);

      ...

      const pickImage = async () => {
      let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
      });

      console.log(result);

      if (!result.cancelled) {
      setImage(result.uri);
      }
    };

    const takeImage = async () => {
      let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
      });

      console.log(result);

      if (!result.cancelled) {
      setImage(result.uri);
      }
    };

    ...

       <Button
                style = {styles.button}
                title="Submit"
                        onPress={ async () => {
                          await FileSystem.moveAsync({
                            from: image,
                            to: FileSystem.documentDirectory + 'Images/'
                        });
                        }}
                color="#19AC52"
            />

我再次尝试将上传的图像保存到名为“Images”的本地文件夹中。这是我在尝试提交时收到的未处理的承诺请求消息：

[Unhandled promise rejection: Error: File 'file:///data/user/0/host.exp.exponent/cache/ExperienceData/UNVERIFIED-10.69.14.83-DOH_Mobile_V1/ImagePicker/e556a2a3-692b-47bb-8a8b-0731883c33e9.jpg' could not be moved to 'file:///data/user/0/host.exp.exponent/files/ExperienceData/UNVERIFIED-10.69.14.83-DOH_Mobile_V1/Images/']
at node_modules\react-native\Libraries\BatchedBridge\NativeModules.js:103:50 in promiseMethodWrapper
at node_modules\@unimodules\react-native-adapter\build\NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules\expo-file-system\build\FileSystem.js:69:17 in moveAsync
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:189:16 in PromiseImpl$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
at node_modules\react-native\node_modules\promise\setimmediate\core.js:200:22 in doResolve
at node_modules\react-native\node_modules\promise\setimmediate\core.js:66:11 in Promise
at node_modules\regenerator-runtime\runtime.js:188:15 in callInvokeWithMethodAndArg
at node_modules\regenerator-runtime\runtime.js:211:38 in enqueue
at node_modules\regenerator-runtime\runtime.js:238:8 in exports.async
at node_modules\expo-file-system\build\FileSystem.js:65:7 in moveAsync
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:189:16 in PromiseImpl$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
at node_modules\react-native\node_modules\promise\setimmediate\core.js:200:22 in doResolve
at node_modules\react-native\node_modules\promise\setimmediate\core.js:66:11 in Promise
at node_modules\regenerator-runtime\runtime.js:188:15 in callInvokeWithMethodAndArg
at node_modules\regenerator-runtime\runtime.js:211:38 in enqueue
at node_modules\regenerator-runtime\runtime.js:238:8 in exports.async
at node_modules\react-native\Libraries\Pressability\Pressability.js:691:17 in _performTransitionSideEffects
at node_modules\react-native\Libraries\Pressability\Pressability.js:628:6 in _receiveSignal
at node_modules\react-native\Libraries\Pressability\Pressability.js:524:8 in responderEventHandlers.onResponderRelease
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:500:2 in invokeGuardedCallbackAndCatchFirstError
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:597:41 in executeDispatch
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:621:19 in executeDispatchesInOrder
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2521:28 in executeDispatchesAndRelease
at [native code]:null in forEach
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:836:4 in forEachAccumulated
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2546:20 in runEventsInBatch
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2702:18 in runExtractedPluginEventsInBatch
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2639:35 in batchedUpdates$argument_0
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17712:13 in batchedUpdates$1
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2767:27 in receiveTouches
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

也许我遗漏了一些东西，但此错误消息对于找出我做错了什么或我需要做些什么来使它正确并没有多大帮助。任何帮助将不胜感激。

Answer 1

首先从here安装expo-media-library

然后创建一个函数来保存文件到设备

  const SaveToPhone = async (item) => {
    // Remember, here item is a file uri which looks like this. file://..
    const permission = await MediaLibrary.requestPermissionsAsync();
    if (permission.granted) {
      try {
        const asset = await MediaLibrary.createAssetAsync(item);
        MediaLibrary.createAlbumAsync('Images', asset, false)
          .then(() => {
            console.log('File Saved Successfully!');
          })
          .catch(() => {
            console.log('Error In Saving File!');
          });
      } catch (error) {
        console.log(error);
      }
    } else {
      console.log('Need Storage permission to save file');
    }
  };

那么你的 Button 应该是这样的

<Button
  style={styles.button}
  title="Submit"
  onPress={() => SaveToPhone(image)}
  color="#19AC52"
/>

也像这样在顶部导入

import * as MediaLibrary from 'expo-media-library';

查看工作示例here