JavaScript 浏览本地文件夹

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

1. Window：showDirectoryPicker() 方法

注意浏览器兼容性：showDirectoryPicker 浏览器兼容性

1. FileReader

3. Notice

1. 文件操作全都是异步，如果结果有问题，请务必检查是否添加await、async等关键字
2. 本文内容是 学习B站 【渡一教育】 整理得来