浏览器读取计算机文件信息 showDirectoryPicker

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>选择电脑文件夹</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet" />
</head>

<body>
  <div id="app">
    <button @click="openFolder">打开文件夹</button>
    <el-tree v-if="list.length" :data="list" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>

  <script>
    window.vm = new Vue({
      el: "#app",
      data() {
        return {
          list: [],
          defaultProps: {
            children: "children",
            label: "name",
          },
        };
      },
      methods: {
        async openFolder() {
          let handle = await showDirectoryPicker( /* {multiple: true} */ );
          await this.handleHandler(handle);
          this.list = [handle];
          this.$forceUpdate();
          console.log(handle);
        },
        async handleHandler(handle) {
          await processHandler(handle);
          async function processHandler(handle) {
            if (handle.kind === "file") {
              return;
            }
            handle.children = [];
            let iter = await handle.entries();
            for await (let entry of iter) {
              await processHandler(entry[1]);
              handle.children.push(entry[1]);
            }
          }
        },
        handleNodeClick() {},
      },
    });
  </script>
</body>

</html>