Electron中registerFileProtocol已废弃，如何自定义文件协议？

Electron目前推荐用protocol.handle()替代废弃的registerFileProtocol等API，以下是具体实现方案：

主进程配置（main.js） #

等Electron应用就绪后，注册自定义协议并处理本地文件请求：

const { app, protocol } = require('electron');
const path = require('path');
const fs = require('fs').promises;

app.whenReady().then(async () => {
  // 注册自定义协议，比如命名为"app-resource"
  await protocol.handle('app-resource', async (request) => {
    // 剥离协议头并解码URI编码的路径
    const rawPath = decodeURIComponent(request.url.replace('app-resource://', ''));
    // 适配Windows系统路径格式，把"/C:/"转成"C:/"
    const realFilePath = process.platform === 'win32'
      ? rawPath.replace(/^\/([A-Za-z]:)/, '$1')
      : rawPath;

    try {
      // 读取文件内容
      const fileBuffer = await fs.readFile(realFilePath);
      // 根据后缀设置MIME类型，可按需扩展
      const ext = path.extname(realFilePath).toLowerCase();
      let mimeType = 'application/octet-stream';
      if (ext.match(/\.jpe?g/)) mimeType = 'image/jpeg';
      if (ext === '.png') mimeType = 'image/png';
      if (ext === '.gif') mimeType = 'image/gif';

      // 返回文件响应
      return new Response(fileBuffer, {
        headers: { 'Content-Type': mimeType }
      });
    } catch (err) {
      // 文件不存在或读取失败时返回404
      return new Response(null, { status: 404 });
    }
  });
});

Vue渲染进程使用 #

在Vue组件里把本地路径转成自定义协议URL，直接用于图片展示：

<template>
  <img :src="getCustomProtocolUrl(userImagePath)" alt="用户存储图片" />
</template>

<script setup>
// 示例用户图片路径，实际需从用户存储目录获取
const userImagePath = 'C:/Users/xxx/avatar.jpg';

const getCustomProtocolUrl = (localPath) => {
  // 编码路径避免特殊字符问题
  const encodedPath = encodeURIComponent(localPath);
  return `app-resource://${encodedPath}`;
};
</script>

关键注意点 #

• 自定义协议名不能和http、file等标准协议重复，建议用app-resource、local-file这类专属名称
• 确保应用有权限访问目标文件目录，比如Windows用户文档目录默认有权限，无需额外配置
• 要适配不同操作系统的路径格式，比如Windows盘符、斜杠方向差异
• 若需支持更多文件类型，可扩展MIME类型判断逻辑

内容的提问来源于stack exchange，提问作者sundrycode