electron+node管理本地文件

---

theme: fancy

我们在开发electron的时候可能会有这样的需要：管理本地文件或者说操作本地文件，而electron自带node环境，可以很好的让我们操作本地文件，那么就让我们一起来看看吧。

api了解

我们主要用到的是node自带的api和electron中操作的文件的一些方法。 electron的方法很多，大家可以自行了解一下；我目前只是针对目前的一些功能给大家简单的说了一些api以及注意的点。

```javascript dialog.showOpenDialog // electron 自带操作文件的方法

// node环境自带的方法 const fs = require('fs'); const path = require('path'); ```

主要的功能

今天主要实现的功能是以下四项。

• 默认保存目录
• 拖拽和点击选择文件
• 保存(拷贝)选中的文件
• 删除拷贝的文件

默认保存目录

渲染环境

javascript MessageBox.confirm("勿频繁切换文件路径, 不方便管理！", "提示", { confirmButtonText: "修改文件路径", cancelButtonText: "不修改", type: "warning", }) .then(() => { ipcRenderer.send("amend-directory"); }) .catch(() => {});

node环境

配置properties表示只选择文件夹，具体的大家可以查看文档。dialog.showOpenDialog；然后用户选择了文件以后，通过 event.sender.send('amend-directory-end', file) 将想要的参数返回渲染环境即可。

javascript ipcMain.on('amend-directory', (event) => { dialog.showOpenDialog({ // defaultPath:'D:\\TEXT', // 默认盘 properties: ["openFile", "openDirectory"], }).then(result => { console.log(result); if (!result.canceled && result.filePaths.length > 0) { const file = result.filePaths[0]; event.sender.send('amend-directory-end', file); } }).catch(err => { console.error(err) }) });

拖拽和点击选择文件

这儿是拖拽事件以及点击事件，如果是拖拽事情files就是有值的，反之没有值；然后再node环境 中去监听值并做相对于的处理。后续可以看代码逻辑

这儿我是直接用的vue提供的，也可以用原生了。没啥差异 javascript @click="uploadFiles" @dragover="onDragover" @drop="onDrag"

```javascript // 监听拖拽 onDrag(e) { e.preventDefault(); const files = e.dataTransfer.files; const file = files["0"]; if (file) { if (file.name.indexOf(".pdf") === -1) { return Message.warning("必须上传pdf文件"); } ipcRenderer.send("copy-directory", { directory: this.directory, files: file.path, }); } console.log(file); }, onDragover(e) { e.preventDefault(); },

// 点击上传文件
uploadFiles() {
  ipcRenderer.send("copy-directory", {
    directory: this.directory,
    files: "",
  });
},

```

保存(拷贝)选中的文件

• 1、files文件来源路径，directory保存路径
• 2、通过day获取时间戳和当前日期
• 3、通过path创建文件路径
• 4、fs.mkdir创建当前日期文件夹
• 5、如果是拖拽过来的文件直接拷贝到保存路径，并且返回相对于的状态
• 6、反之，让其选择文件filters数组是配置可选择的文件(可以多个)；然后再拷贝并返回对应的状态

注意点： 这儿有一个需要注意的点，如果你需要选择某一个文件(如：pdf文件)，那么你的properties 就需要为空；否则只能选中文件。

```javascript ipcMain.on('copy-directory', (event, info) => { console.log(info); let { files, directory } = info;

const millisecond = dayjs().valueOf().toString();
    const currentDate = dayjs().format("YYYY-MM-DD");
    // 创建当前时间文件夹
    const file = path.join(directory, currentDate);
    // pdf文件路径
    const targetFolder = path.join(directory, currentDate, `${millisecond}.pdf`);

    fs.mkdir(file, { recursive: true }, err => {
        if (err) {
            return event.sender.send('copy-directory-end', { code: 400, msg: `mkdir path: ${currentDate} err` });
        };
    });

    if (files) { // 拖拽
        fs.copyFile(files, targetFolder, (err) => {
            if (err) {
                return event.sender.send('copy-directory-end', { code: 400, msg: `Copy files err` });
            };
            event.sender.send('copy-directory-end', { code: 200, msg: `Copy files succeed`, files: targetFolder });
        });
    } else { // 选择
        dialog.showOpenDialog({
            properties: [],
            filters: [
                { name: 'PDF Files', extensions: ['pdf'] }
            ]
        }).then(result => {
            const filePaths = result.filePaths[0];
            // console.log(filePaths);
            fs.copyFile(filePaths, targetFolder, (err) => {
                if (err) {
                    return event.sender.send('copy-directory-end', { code: 400, msg: `Copy files err` });
                };
                event.sender.send('copy-directory-end', { code: 200, msg: `Copy files succeed`, files: targetFolder });
            });

        }).catch(err => {
            return event.sender.send('copy-directory-end', { code: 400, msg: `您取消了选择的文件`,message:err });
        })
    }
});

```

删除拷贝的文件

渲染环境

javascript const file = this.params.files; if(!file) return Message.warning('未识别到路径, 你刷新试试!'); MessageBox.confirm(`您将删除${file}目录下的文件, 是否继续?`, "提示", { confirmButtonText: "删除", cancelButtonText: "取消", type: "warning", }) .then(() => { ipcRenderer.send("del-directory-pdf", file); }) .catch(() => {});

node环境

删除比较简单，只需要通过fs.unlink找到对应的路径即可，然后即可删除文件

javascript // 删除对应的pdf文件 ipcMain.on('del-directory-pdf', (event, filepath) => { console.log(filepath); fs.unlink(filepath, function (err) { if (err) { return event.sender.send('del-directory-pdf-end', { code: 400, msg: `delete path: ${filepath} err` }); }; event.sender.send('del-directory-pdf-end', { code: 200, msg: `delete files succeed` }); }) });

如果您喜欢我的文章或者该文章对你有帮助，您也可以关注我的公众号：【前端雾恋】

往期文章

• css登录按钮炫酷效果

• css是你永远学不会的语言

• electron 中使用本地数据库

• electron 中 webview的使用

• 前端使用electron+vue3+ts搭建一个桌面端应用且可以热更新