electron+node管理本地文件

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

api了解

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

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

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

主要的功能

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

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

默认保存目录

渲染环境

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

node环境

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

    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提供的，也可以用原生了。没啥差异

@click="uploadFiles"
@dragover="onDragover"
@drop="onDrag"

    // 监听拖拽
    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 就需要为空；否则只能选中文件。

    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 });
            })
        }
    });

删除拷贝的文件

渲染环境

      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找到对应的路径即可，然后即可删除文件

// 删除对应的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搭建一个桌面端应用且可以热更新