【Electron】vue+electron实现图片视频本地缓存_electron 缓存数据-优快云博客

本文链接：https://blog.youkuaiyun.com/Android_boom/article/details/126872567

本文介绍了如何使用Electron结合Vue，将图片视频请求缓存到本地，包括监听请求、存储文件、存入本地数据库、展示本地图片的步骤。文章还提到了权限问题的解决方案以及使用localforage作为本地数据库，并讨论了定义本地文件展示协议的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景

有一款electron开发的桌面应用，因为包含即时通讯的功能，所以在聊天消息中会有很多的图片视频消息以及会话的头像等，这些图片视频占用了大量的网络资源，领导要求优化一下，将图片和视频缓存至本地。

二、步骤

1.获取所有的图片视频请求

经过调研发现electron的session模块有关于本应用的所有的web请求的监听方法。可参考 electron官方文档链接-WebRequest 于是乎，我们可以用这个方法获取到所有的图片视频的请求了

// 这里filter参数是为了筛选过滤哪些url的请求，
session.defaultSession.webRequest.onCompleted(filter, (details) => {
	// 这里可以通过details.resourceType判断请求的是否为图片类型，这里也获取了other，是因为视频也会存在在other中if ((details.resourceType === 'image' || details.resourceType === 'other')) {	// 获取请求地址 	 	const souceUrl = details.url}
 })

注意这个监听一定要在app.ready之后调用

app.on('ready', async () => {
	// 在这里调用
})

2.将图片和视频存储至本地

这里我使用的是node的request模块。在监听到请求后，将获取到的图片视频请求地址，通过request模块下载至本地。在这之前先创建本应用的本地文件缓存地址。这里有个坑，在打包之后，如果在应用内生成文件夹，windows系统会报错，因为应用没有访问权限，不能进行文件的操作。这里有两种解决方法：

1.方法一（不推荐）因为我是通过electron-builder构建的应用，可以在打包配置里面添加如下代码，将打包的应用等级提升为管理员权限，这样打好包安装之后运行，默认是以管理员身份运行的。

builderOptions: {
	...
	win: {
		...
		requestedExecutionLevel: 'highestAvailable'
	}
}

但是这种方法有个缺陷，以管理员身份运行的程序，在windows系统中，是不允许文件往里面拖拽的。设置好之后，创建文件夹

import fs from 'fs'
const path = require('path')
const log = require('electron-log') // 记录日志（如有需要安装）
// 设置存放缓存文件的文件夹
const AVATARPATH = 'temp'
// 设置文件夹位置（在安装应用文件夹内）
const basePath = path.join(__dirname, AVATARPATH)
fs.mkdir(basePath, { recursive: true }, err => {
	if (err) log.warn(`mkdir path: ${basePath} err`)
})

2.方法二（推荐！！！）因为不能拖拽，会影响文件上传等功能，致使用户体验非常不好，之后又找到electron文档中，有一个方法 app.getPath(name) 可以使用。