electron实现打开本地文件接口(返回文件大小、文件名及文件后缀名和文件流等)

功能实现需要几个原生模块:

const electron = require('electron');

const dialog = electron.remote.dialog
const app = electron.remote.app
const fs = require('fs');
const path = require('path');

 

 

1.通过dialog模块打开文件选择窗口, 回调函数会返回一个文件的绝对路径出来

2.通过app模块的getFileIcon方法,获得文件的icon二进制流文件,将它转成html可读的blob格式

3.通过fs的stat方法得到选中文件的size

4.通过paht模块的basename、extname方法分别获得文件名和文件后缀名

5.通过fs的读写模块readFile获得文件返回的文件流

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Electron和Node.js在浏览器中打开本地视频,你可以使用Node.js的`fs`模块来读取本地视频文件,然后将文件路径作为`<video>`标签的`src`属性值,最后使用Electron的`BrowserWindow`模块来创建一个包含`<video>`标签的窗口。 具体步骤如下: 1. 在你的Electron项目目录下,创建一个视频文件夹,并将你的本地视频文件放入该文件夹中。 2. 在你的JavaScript文件中,使用`fs`模块读取本地视频文件,示例代码如下: ```javascript const { app, BrowserWindow } = require('electron'); const path = require('path'); const url = require('url'); const fs = require('fs'); let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); const filePath = path.join(__dirname, '/videos/video.mp4'); // 视频文件路径 const fileExists = fs.existsSync(filePath); if (fileExists) { mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true, })); mainWindow.webContents.on('did-finish-load', () => { mainWindow.webContents.send('play-video', filePath); }); } else { console.error('视频文件不存在'); } mainWindow.on('closed', () => { mainWindow = null; }); } app.on('ready', createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (mainWindow === null) { createWindow(); } }); ``` 其中,`filePath`是你本地视频文件的路径,`fileExists`变量用于判断视频文件是否存在。 3. 在你的HTML文件中,创建一个包含`<video>`标签的页面,示例代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Video Player</title> </head> <body> <video id="video-player" width="640" height="360" controls> Your browser does not support the video tag. </video> <script src="./renderer.js"></script> </body> </html> ``` 其中,`<video>`标签的`id`属性为`video-player`,`controls`属性用于显示视频控制条。 4. 在你的renderer.js文件中,使用`ipcRenderer`模块来接收主进程发送的视频文件路径,并将其作为`<video>`标签的`src`属性值,示例代码如下: ```javascript const { ipcRenderer } = require('electron'); ipcRenderer.on('play-video', (event, filePath) => { const videoPlayer = document.getElementById('video-player'); videoPlayer.src = `file://${filePath}`; }); ``` 其中,`ipcRenderer.on('play-video', ...)`用于接收主进程发送的视频文件路径,`videoPlayer.src`用于将其作为`<video>`标签的`src`属性值。 5. 运行JavaScript文件,即可通过Electron打开包含`<video>`标签的窗口,自动播放指定的本地视频文件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值