选择大型视频文件反应原生 expo 图像选择器答案

【问题标题】：Picking large video files react native expo image picker选择大型视频文件反应原生 expo 图像选择器
【发布时间】：2022-08-19 20:06:46
【问题描述】：

尝试从 react native expo 图像选择器中选择要上传到 mux 的视频文件。

选择 75mb 的视频在几秒钟后得到此响应没有问题：

{uri: \'data:video/pm4;base64.AAAHDSHG...e.c.t\', width: 0, height: 0, cancelled: false}

但是，当我尝试在 30 秒左右后选择 >1gb 的视频文件时，我没有收到任何错误消息，只是空 uri 成功，例如

{uri: \'\', width: 0, height: 0, cancelled: false}

它与base64的大小有关吗？

如何使用 react native expo 选择要发送到服务器的大型视频文件？提前谢谢了

例如。代码

import React, { useState, useEffect } from \'react\';
import { StyleSheet, View } from \'react-native\';
import { Button } from \'react-native-paper\';
import { connect } from \'react-redux\';

import * as ImagePicker from \'expo-image-picker\';

function CreateOnDemand(props) {

    const [image, setImage] = useState(null);

    const pickImage = async () => {
        // No permissions request is necessary for launching the image library
        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.All,
          allowsEditing: true,
        //   aspect: [4, 3],
          quality: 0.9,
          base64: true,
        });
    
        console.log(\"result \", result);
    
        if (!result.cancelled) {
            console.log(\"Success! \", result)

          setImage(result.uri);
        } else {
            console.log(\"Failed \", result)
        }
    };


    return (
    <View style={styles.container}>
        <View style={styles.contents}>
            <Button  onPress={pickImage}>
                Pick an image from camera roll
            </Button>
        </View>
    </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: \'space-evenly\',
        alignItems: \'center\', 
    },
    contents: {
        maxWidth: 600,
        width: \"100%\",
    },
})


const mapStateToProps = (store) => ({
    currentUser: store.userState.currentUser,
})


export default connect(mapStateToProps)(CreateOnDemand);

包.json

{
  \"main\": \"node_modules/expo/AppEntry.js\",
  \"scripts\": {
    \"start\": \"expo start\",
    \"android\": \"expo start --android\",
    \"ios\": \"expo start --ios\",
    \"web\": \"expo start --web\",
    \"eject\": \"expo eject\"
  },
  \"dependencies\": {
    \"@react-native-picker/picker\": \"2.2.1\",
    \"@react-navigation/drawer\": \"^6.1.8\",
    \"@react-navigation/material-bottom-tabs\": \"^6.1.1\",
    \"@react-navigation/native\": \"^6.0.8\",
    \"@react-navigation/native-stack\": \"^6.5.0\",
    \"expo\": \"^44.0.0\",
    \"expo-app-loading\": \"~1.3.0\",
    \"expo-av\": \"~10.2.0\",
    \"expo-cli\": \"^4.13.0\",
    \"expo-firebase-analytics\": \"~6.0.0\",
    \"expo-font\": \"~10.0.4\",
    \"expo-image-picker\": \"~12.0.1\",
    \"expo-linking\": \"~3.0.0\",
    \"expo-status-bar\": \"~1.2.0\",
    \"expo-web-browser\": \"~10.1.0\",
    \"firebase\": \"^9.6.6\",
    \"react\": \"17.0.1\",
    \"react-dom\": \"17.0.1\",
    \"react-native\": \"0.64.3\",
    \"react-native-circular-progress\": \"^1.3.7\",
    \"react-native-countdown-circle-timer\": \"^2.5.4\",
    \"react-native-dotenv\": \"^3.2.0\",
    \"react-native-gesture-handler\": \"~2.1.0\",
    \"react-native-image-picker\": \"^4.7.3\",
    \"react-native-paper\": \"^4.11.2\",
    \"react-native-reanimated\": \"~2.3.1\",
    \"react-native-safe-area-context\": \"3.3.2\",
    \"react-native-screens\": \"~3.10.1\",
    \"react-native-svg\": \"12.1.1\",
    \"react-native-vector-icons\": \"^8.1.0\",
    \"react-native-web\": \"0.17.1\",
    \"react-native-webview\": \"11.15.0\",
    \"react-redux\": \"^7.2.5\",
    \"redux\": \"^4.1.1\",
    \"redux-thunk\": \"^2.3.0\"
  },
  \"devDependencies\": {
    \"@babel/core\": \"^7.12.9\"
  },
  \"private\": true
}

标签： react-native video file-upload expo imagepicker

【解决方案1】：

当您上传视频或图片时，expo-image-picker 会获取该视频并将副本保存到您的应用缓存中。

根据可用的可用内存，超过 1GB 是设备上的巨大容量，并且没有可用于分配该文件副本的内存。

建议始终限制上传的视频大小。

建议文件上传成功后清除应用缓存。

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

const purgeAppCache = async () => {
  try {
    const cacheDirectory = FileSystem.cacheDirectory;

    await FileSystem.deleteAsync(cacheDirectory);

    console.log("app cache purged...");
  } catch (error) {
    console.log(error);
  }
};

export default purgeAppCache;

【讨论】：

感谢您的帮助，该应用程序必须能够加载 1gb+ 的大型视频文件，您知道任何替代方法吗？
尝试计算设备可用内存，如果小于1GB，建议用户在尝试上传大文件之前释放内存
@FistonEmmanuel我目前正在为大量使用本地存储（Android和iOS）而苦苦挣扎。这似乎是由我的应用程序中的视频上传功能引起的。 expo-image-picker 库可能是造成这种情况的原因吗？有没有办法释放使用的应用缓存？
每次您上传新视频或图像时，expo-image-picker 都会生成该文件的副本。上传成功后需要清除缓存的图片
@FistonEmmanuel 非常感谢您的快速回复。您对如何清除视频缓存有什么建议吗？