electron选择加载本地资源【图片、视频、音频】_electron加载本地图片

弹出文件选择框

// main
const openDialog = async () => {
       const options: OpenDialogOptions = {
			properties: ['openFile'],
			filters: [{ name: 'Videos', extensions: ['mp4', 'mov', 'avi'] }],
		};
		const results = await dialog.showOpenDialog(options)
		return results
	}
1
2
3
4
5
6
7
8
9

此时我们拿到的是 文件的绝对路径，但是在渲染进程是无法根据这个路径去显示。此时就用到了node中文件处理fs

获取文件buffer

// main
import fs from 'fs'
export function getFileBufByFilePath(item: string){
	const buf = fs.readFileSync(item)
	return buf;
}
1
2
3
4
5
6

通过blob转换url

// Renderer
const getURLByBuffer = (buf: number[]) => {
		const uint8Buffer = Uint8Array.from(buf)
		const bolb = new Blob([uint8Buffer])
		return window.URL.createObjectURL(bolb)
	}
1
2
3
4
5
6

总结

electron要成功预览本地文件主要还是利用 fs.readFileSync(item) 对文件做处理，拿到二进制数据，通过主进程与渲染进程通信，把文件的二进制传输给渲染进程，经过 Blob转换得到URL, 就ok了。