1. JavaScript 浏览本地文件夹
button.onclick = async function () {// 给按钮绑定事件
try {
const handler = await showDirectoryPicker(
// {
// mode: 'readwrite', //指定读写模式:读/读写
// startIn: 'documents' // 指定默认打开的文件夹
// }
)
const root = await processHandler(handler)
// 遍历文件,读取文件,仅供参考,因为不是所有文件都是文本文件都可以readAsText()
for await (const iterator of root.children) {
if (iterator.kind !== 'file') continue
const file = await iterator.getFile()
const reader = new FileReader()
reader.onload = e => {
console.log(e.target.result)
}
reader.readAsText(file)
console.log(file)
}
} catch (e) {
if (e.toString().includes('AbortError')) {
alert('用户关闭了对话框或者取消了授权')
} else {
alert('e')
}
}
}
/**
* 递归遍历文件夹
*/
async function processHandler(handler) {
if (handler.kind !== 'file') { // 不是文件,就进行递归遍历,是文件,就直接返回
const entries = await handler.entries()// 获取文件夹中所有的内容
handler.children = []
for await (const iterator of entries) {
const childrenHandler = await processHandler(iterator[1])
handler.children.push(childrenHandler)
}
}
return handler
}
2. Reference
注意浏览器兼容性:showDirectoryPicker 浏览器兼容性
3. Notice
- 文件操作全都是异步,如果结果有问题,请务必检查是否添加await、async等关键字
- 本文内容是 学习B站 【渡一教育】 整理得来