如何在expo中找到录制的视频文件的大小？

问题描述

我正在与世博会合作。我正在使用世博相机录制视频。我正在获取视频的 URI。但是我想在上传之前计算视频的大小（超过5MB将被禁止）。我只能获取视频的 URI。那么，如何获取视频的大小呢？我也用谷歌搜索过，但没有找到任何相关的答案。

组件文件

import React,{ Component } from "react";
import { View,Text,TouchableOpacity,StyleSheet } from "react-native";
import {
  widthPercentagetoDP as wp,heightPercentagetoDP as hp,} from "react-native-responsive-screen";
import { Camera } from "expo-camera";

export default class Recordvideo extends React.Component {

// Local State
  state = {
    video: null,picture: null,recording: false,hasPermission: null,setHasPermission: "",};

// Getting camera permission
 componentDidMount = async () => {
    const { status } = await Camera.requestPermissionsAsync();
    if (status === "granted") {
      this.setState({ hasPermission: true });
    }
  };

 // Getting Video URI After Recording Completed 
_saveVideo = async () => {
    const { video } = this.state;
    console.log(video);
    this.props.navigation.push("Post",{
      VIDEOURL: video.uri,VIDEOID: 1,mod: true,});
  };

// Stop Recording Function
 _StopRecord = async () => {
    this.setState({ recording: false },() => {
      this.cam.stopRecording();
    });
  };

// Start Recording Function
 _StartRecord = async () => {
    if (this.cam) {
      this.setState({ recording: true },async () => {
        const video = await this.cam.recordAsync();
        this.setState({ video });
      });
    }
  };

// Toogle function for start/stop recording
  toogleRecord = () => {
    const { recording } = this.state;

    if (recording) {
      this._StopRecord();
    } else {
      this._StartRecord();
    }
  };

// Render function
 render() {
    const { recording,video } = this.state;
    if (this.state.hasPermission === null) {
      return <View />;
    }
    if (this.state.hasPermission === false) {
      return (
        <View
          style={{ flex: 1,alignItems: "center",justifyContent: "center" }}
        >
          <Text>No access to camera</Text>
        </View>
      );
    }

   // return statement
    return (
      <View style={styles.responsiveBox}>
        <Camera
          ref={(cam) => (this.cam = cam)}
          style={{
            justifyContent: "flex-end",flex: 1,width: "100%",}}
        >

// on Completing Video button,firing _saveVideo Function
          {video && (
            <TouchableOpacity
              onPress={this._saveVideo}
              style={{
                padding: 20,backgroundColor: "#fff",}}
            >
              <Text style={{ textAlign: "center" }}>Complete</Text>
            </TouchableOpacity>
          )}

// on Toggle VideoRecording for start/stop video recording button,firing _toogleRecord Function
          <TouchableOpacity
            onPress={this.toogleRecord}
            style={{
              padding: 20,backgroundColor: recording ? "#ef4f84" : "#4fef97",}}
          >
            <Text style={{ textAlign: "center" }}>
              {recording ? "Stop" : "Record"}
            </Text>
          </TouchableOpacity>
        </Camera>
      </View>
    );
  }
}


  // Styles
const styles = StyleSheet.create({
  responsiveBox: {
    width: wp("100%"),height: hp("100%"),justifyContent: "center",},});

解决方法

如果你正在使用 expo ，你可以试试 FileSystem

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

getFileSize = async fileUri => {
   let fileInfo = await FileSystem.getInfoAsync(fileUri);
   return fileInfo.size;
 };

else 安装 react-native-fs 并使用 stat 方法（获取文件大小）

getFileSize = async fileUri => {
       let fileInfo = await stat(fileUri);
       return fileInfo.size;
     };