使用 Electron 和 React 从目录读取文件名并输出到 JSON 的方法

Posted 2023-03-07

【中文标题】使用 Electron 和 React 从目录读取文件名并输出到 JSON 的方法

【英文标题】：Way to read filenames from directory and output to JSON with Electron & React

【发布时间】：2020-05-02 21:13:04

【问题描述】：

我正在尝试使用 Electron 和 React 制作音乐播放器应用程序。构建和安装后，我已经能够访问资源/音乐文件夹中的音乐文件，但我必须提供 mp3 的确切路径。

我一直在尝试扫描目录并获取所有音乐文件名以放入 JSON 的方法，因为用户可以将自己的音乐文件添加到音乐文件夹中，以由应用程序拾取并显示在列表。

我看到的大多数解决方案都使用 node fs，但我只是想让它工作。我不断收到 TypeError: fs.readdir is not a function

任何帮助将不胜感激。

import React,  Component  from 'react';
import  Link  from "react-router-dom"
import Testpage from "./Test";
import song from '../Music/Taxi.mp3'
import FileSearch from "../filesearch";

const fileSearch = new FileSearch();

const dataPath =
    process.env.NODE_ENV === 'development'
        ? song
        : 'file:///resources/Music/Taxi.mp3';




class Home extends Component 
    constructor(props) 
        super(props);

        this.state = ;
    

    componentDidMount() 
        fileSearch.search()
    


    render() 
        return (
            <div id="page">
                <h1>laceHolder Home</h1>
                <div>
                    <Testpage song=dataPath/>
                </div>
            </div>
        );
    


export default Home;

const testFolder = './';
const fs = require('fs');

export default class FileSearch 

    search = () => 
        fs.readdir(testFolder, (err, files) => 
            files.forEach(file => 
                console.log(file);
            );
        );
    

【问题讨论】：

您是否尝试过使用window.requires？这似乎与您有关：***.com/questions/35428639/…

console.log() fs 看看它是否真的被导入了。

【参考方案1】：

经过数小时的查找后解决了（我对反应和电子还很陌生），

我使用下面的而不是 vanilla fs import 并且它起作用了！

const remote = window.require('electron').remote;
const electronFs = remote.require('fs');
const electronDialog = remote.dialog;

感谢您的 cmets 查看 window.require