下载

npm install mediainfo.js

2. vue.config.js 文件配置添加如下：

const CopyPlugin = require('copy-webpack-plugin')

const wasmFile = resolve('node_modules/mediainfo.js/dist/MediaInfoModule.wasm')

configureWebpack: { resolve: { // 下面一行因为报错之后提示安装 path-browserify 才写 fallback: { path: require.resolve('path-browserify') }, }, externals: { // 下面一行因为报错之后提示引入 fs 才写 fs: require('fs'), },plugins: [ new CopyPlugin({ patterns: [ { from: wasmFile, to: '.' }]}), ]}

代码使用 mediainfo.js 的地方

引入

import mediainfo from 'mediainfo.js'

使用所需代码

上传之前拿取媒体文件信息

const beforeUpload = (file) => { const getSize = () => file.size; const readChunk = (chunkSize, offset) => new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = event => { if (event.target) { if (event.target.error) { reject(event.target.error); } resolve(new Uint8Array(event.target.result as any)); } }; reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize)); }); await Mediainfo().then(async mediainfo => { await mediainfo.analyzeData(getSize, readChunk as any)?.then(result => { console.log('result: ', result) }); }); }

遇到的困难

找不到 MediaInfoModule.wasm 文件

configureWebpack: { plugins: [ new CopyPlugin({ patterns: [ { from: wasmFile, to: '.' }]}), ]} ，我的项目改为 configureWebpack: { plugins: [ new CopyPlugin({ patterns: [ { from: wasmFile, to: 'js/MediaInfoModule.wasm' }]}), ]}之后就正常了 就是说 to 的位置根据自己的项目试着改下路径

注意更改 vue.config.js，因为此为配置文件，更改之后需要重启项目，npm run xxx