解析拖拽的文件列表

 解析文件的时候要判别是文件目录还是文件夹，然后再分别读取：

function parseDataTransfer(event) {
	return new Promise((resolve, reject) => {
		try {
			const files = [];
			const { dataTransfer } = event;
			if (!dataTransfer) { return files; }
			// 记录下文件的总个数，在解析的时候要用到
			const filesTotal = dataTransfer.items.length;
			for (let i = 0; i < filesTotal; i++) {
				const item = dataTransfer.items[i];
				const entry = item.webkitGetAsEntry();
				if (entry.isDirectory) {
					// 文件夹
					readDir(entry, files, resolve);
				} else {
					// 文件
					readFile(entry, files, filesTotal, resolve);
				}
			}
		} catch (e) {
			reject(e);
		}
	});
}

解析文件：

/* 读取文件 */
function readFile(entry, files, filesTotal, resolve) {
	// filesTotal为文件总数量 一次拖动多个文件的时候用于判断是否读完files
	entry.file((file) => {
		files.push(file);
		// 这里判断文件读取结束
		if (files.length === filesTotal) {
			resolve(files);
		}
	});
}

解析文件夹，这里创建一个fileRender

/* 读取文件夹 */
function readDir(entry, files, resolve) {
	const dirReader = entry.createReader();
	readDirFile(dirReader, files, resolve);
}

下面是具体的读取文件，需要规避的坑都代码注释了，一定要认真看哦

let timer;

function readDirFile(dirReader, files, resolve) {
	// 递归读物目录(readEntries 一次最多只读100个文件)
	dirReader.readEntries((result) => {
		// result 为空的时候停止读取
		if (result.length > 0) {
			const len = result.length;
			for (let i = 0; i < len; i++) {
				const itemEntry = result[i];
				if (itemEntry.isDirectory) {
					// 如果是目录 递归读取
					readDir(itemEntry, files, resolve);
				} else {
					itemEntry.file(item => {
						files.push(item);
					});
				}
			}
			// 这里再次读取dirReader 直到result.length === 0 说明文件读完
			readDirFile(dirReader, files, resolve);
		} else {
			// 判断500毫秒内没有继续读文件 认定为完全读完 调用resolve方法
			if (timer) {
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				resolve(files);
			}, 500);
		}
	});
}

到此整个解析拖拽文件的就结束了，看看怎么调用吧

// event 是拖拽事件的event对象
const files = await parseDataTransfer(event);
console.log(files);

如果输出的files是你想要的文件列表，请记得点赞哦。