时间戳

首页 > 解决方案 > 使用 Electron 和 React 从目录读取文件名并输出到 JSON 的方法

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

问题描述

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

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

我看到的大多数解决方案都使用节点 fs，但我只是 cnat 让它工作。我不断收到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);
            });
        });
    }
}

标签： javascriptnode.jsreactjselectron

解决方案

解决了，经过几个小时的观察（我对反应和电子很陌生），

我使用下面的而不是 vanilla fs import 并且它有效！

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

感谢您对 window.require 的评论

推荐阅读