Vue3+Element Plus：用mediainfo.js获取el-upload组件上传视频的FPS全攻略

To use `mediainfo.js` to get the frames per second (FPS) of a video file uploaded via the `el-upload` component in a Vue3 + Element Plus project, you need to follow these steps: 1. Install mediainfo.js: First, you need to install the `mediainfo.js` library. You can do this using npm or yarn. ```bash npm install mediainfo.js # or yarn add mediainfo.js ``` 2. Import and Use mediainfo.js: After installing, you can import and use it in your Vue component. Here's an example of how you can implement this: Step 1: Import and Set Up In your Vue component, import `mediainfo.js` and set up the necessary methods to handle the video file. ```javascript <template> <div> <el-upload ref="uploadRef" :auto-upload="false" :on-change="handleFileChange" :before-upload="beforeUpload" > <el-button type="primary">Click to Upload</el-button> </el-upload> </div> </template> <script setup> import { ref } from 'vue'; import MediaInfo from 'mediainfo.js'; const uploadRef = ref(null); const file = ref(null); const handleFileChange = (file) => { // Handle file change event const fileInfo = file.raw; console.log('File Info:', fileInfo); file.value = fileInfo; }; const beforeUpload = async (rawFile) => { try { const info = await getVideoInfo(rawFile); console.log('Video Info:', info); return true; // Allow upload to proceed } catch (error) { console.error('Error getting video info:', error); return false; // Prevent upload } }; // Function to get video information using mediainfo.js async function getVideoInfo(file) { return new Promise((resolve, reject) => { const mediaInfo = new MediaInfo(); mediaInfo.open(file, (err, info) => { if (err) { reject(err); return; } // Extract FPS from the video information const fps = extractFpsFromInfo(info); // Close the media info instance mediaInfo.close(); resolve({ ...info, fps }); }); }); } // Helper function to extract FPS from the video information function extractFpsFromInfo(info) { const fps = info.streams.find((stream) => stream.type === 'Video')?.other_frame_rate; return fps || 'Unknown'; } </script> ``` Explanation: - Template: The template includes an `el-upload` component with the necessary props. - Script Setup: - Import `ref` from Vue for reactive state management. - Import `MediaInfo` from `mediainfo.js`. - Define reactive references for the upload component and the file. - Define methods to handle file changes and before upload events. - Implement `getVideoInfo` to extract video information using `mediainfo.js`. - Implement `extractFpsFromInfo` to extract FPS from the video information. Usage: This setup allows you to get the FPS of the video file before it is uploaded. You can use this information as needed in your application. Make sure to adjust the method names and logic according to your specific requirements. ######[AI写代码神器 | 729点数解答 | 2024-08-27 21:06:27]