如何在 Electron 中将文件名转换为 URL？

Question

假设我得到一个 .jpg 文件的目录列表，然后想要显示它们

const fs = require('fs');
fs.readDirSync(someAbsolutePathToFolder)
    .filter(f => f.endsWith('.jpg'))
    .forEach(filename => {
        const img = new Image();
        const filepath  = path.join(someAbsolutePathToFolder, filename);
        img.src = `file://${filepath.replace(/\\/g, '/')}`;
        document.body.appendChild(img);
    });

这将失败。举个例子，如果我得到的列表有这样的名字

#001-image.jpg
#002-image.jpg

上面的代码会产生类似的 URL

file://some/path/#001-image.jpg

你可以看到的是一个问题。网址将在#处截断。

This answer 声称我应该使用 encodeURI 但这也失败了，因为它使 # 未转义。

使用encodeURIComponent 也不起作用。它替换了/ 和: 和空格，Electron 找不到该文件，至少在 Windows 上找不到。

到目前为止，我有这样的事情

const filepath  = path.join(someAbsolutePathToFolder, filename).replace(/\\/g, '/');
img.src = `file://${filepath.split('/').map(encodeURIComponent).join('/')}`;

但这在 Windows 上也失败了，因为驱动器号从 c:\dir\file 转换为 c%3a\dir\file，这似乎是电子的相对路径。

所以我有更多特殊情况试图检查路径开头的 [a-z]: 以及 UNC 路径的 \\。

今天我遇到了上面提到的# 问题，我预计会有更多的定时炸弹在等着我，所以我问...

以跨平台方式将文件名转换为 URL 的正确方法是什么？

或者更具体地说，如何解决上述问题。给定本地平台上图像文件绝对路径的目录列表，如果分配给图像的 src 属性，则生成将加载这些图像的 URL。

Answer 1

您可以使用 Node 的 (v10+) pathToFileURL:

import { pathToFileURL } from 'url';
const url = pathToFileURL('/some/path/#001-image.jpg');
img.src = url.href;

见：https://nodejs.org/api/url.html#url_url_pathtofileurl_path

Answer 2

这对我来说很好用：

const open = require('open')
const path = require('path')

const FILE_NAME = 'картинка.jpg'
const filePath  = path.join(__dirname, FILE_NAME)
const fileUrl = `file:///${ filePath.split('\\').join('/') }`

console.log(fileUrl)
open(fileUrl)