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”的本地文件夾中。 這是我在嘗試提交時收到的未處理的 promise 請求消息：

[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

首先從這里安裝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
  style={styles.button}
  title="Submit"
  onPress={() => SaveToPhone(image)}
  color="#19AC52"
/>

同樣在頂部導入這樣

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

請參閱此處的工作示例

Answer 2

作者忘記在這一行添加文件名“to：FileSystem.documentDirectory + 'Images/'”