API基础
已有API可通过文件对象和目标路径实现下载功能。
实现思路
- 实现文件拖拽，通过H5 drag API。
- 在dragStart方法中实现获取目标路径。
- 将目标路径传给已有的下载方法。
技术难点
- 拖拽文件到目录下，创建一个自定义的文件。
- 实现监控自定义文件的创建，获取目标路径。
实现
e.dataTransfer.setData('DownloadURL',[mime]:[filename]:[uri])
通过该方法可以实现创建一个自定义文件到拖拽终点目录。那么该如何监听到自定义文件的创建呢？
在尝试了fs.watch、chokidar(这些在用node-watch实现之后看应该也可以实现，只是当时笔者没研究出来)等后，
终于靠着不懈努力和一点运气，找到了可以实现目标的npm包：node-watch。辅助的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,');
