API基础

已有API可通过文件对象和目标路径实现下载功能。

实现思路

1. 实现文件拖拽，通过H5 drag API。
2. 在dragStart方法中实现获取目标路径。
3. 将目标路径传给已有的下载方法。

技术难点

1. 拖拽文件到目录下，创建一个自定义的文件。
2. 实现监控自定义文件的创建，获取目标路径。

实现

1. e.dataTransfer.setData('DownloadURL',[mime]:[filename]:[uri])
   通过该方法可以实现创建一个自定义文件到拖拽终点目录。

2. 那么该如何监听到自定义文件的创建呢？
   在尝试了fs.watch、chokidar(这些在用node-watch实现之后看应该也可以实现，只是当时笔者没研究出来)等后，
   终于靠着不懈努力和一点运气，找到了可以实现目标的npm包：node-watch。

3. 辅助的node包：

• os: 通过os.tmpdir()获取系统默认的临时文件夹。
  因为拖拽创建的文件会创建两份，一份在拖拽终点目录，一份在系统默认的临时文件夹中。
  可以使用该方法获取，之后进行过滤。

• diskinfo: 通过diskinfo.getDrives()获取获取系统磁盘信息，数组每个对象的mounted为磁盘符号，如'C:'。

• fs: 拖拽下载文件夹时，因为不知道如何直接创建一个文件夹，只能采取替代方案，会对用户体验有一些影响，但并不严重。替代方案：创建文件获取到目标目录后，删除该文件，并使用fs.mkdir()方法创建文件夹。

部分代码

最后附上部分代码，仅供参考：

        // 获取系统盘符信息
        const diskinfo = require('diskinfo');
        diskinfo.getDrives((err, drives) => {
            if (err) {
                console.log(err);
                return;
            }
            drives.forEach(drive => {
                const disk = drive.mounted + '\\';
                if (diskList.indexOf(disk) === -1) diskList.push(disk);
            });
        })

        const watch = require('node-watch');
        const os = require('os');
        const name = fileOrFolder.name;
        let endPath: string = '';
        // 监听所有系统盘符
        watch(diskList, { recursive: true, filter: f => f.match(name) }, (evt, name) => {
            if (evt == 'update') {
                // 防止重复下载
                if (endPath) return;
                const reg = new RegExp(os.tmpdir().split('\\').join('\\\\'));
                !reg.test(name) && (endPath = name);
                endPath && callback(fileOrFolder, endPath);
            }
        })

// 拖拽下载
e.dataTransfer.setData('DownloadURL', 'application/html:' + file.name + ':data:base64,');

参考：

1. Drag to Desktop in JS
2. node-watch
3. Electron拖拽下载能力