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
}
此时我们拿到的是 文件的绝对路径，但是在渲染进程是无法根据这个路径去显示。此时就用到了node中文件处理fs
获取文件buffer
// main
import fs from 'fs'
export function getFileBufByFilePath(item: string){
const buf = fs.readFileSync(item)
return buf;
}
通过blob转换url
// Renderer
const getURLByBuffer = (buf: number[]) => {
const uint8Buffer = Uint8Array.from(buf)
const bolb = new Blob([uint8Buffer])
return window.URL.createObjectURL(bolb)
}
总结
electron要成功预览本地文件主要还是利用 fs.readFileSync(item) 对文件做处理，拿到二进制数据，通过主进程与渲染进程通信，把文件的二进制传输给渲染进程，经过 Blob转换得到URL, 就ok了。
原文地址：https://blog.csdn.net/weixin_42429220/article/details/139186935
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！