Chrome 浏览器可以读写本地文件了，虽说是实验api，但是基本86+已经支持了

Wish3D2025-02-15 10:18

目前该API只能在https域名上使用！！！

实现逻辑：

1.唤醒浏览器选择文件夹、文件权限

复制代码

document.getElementById('button').addEventListener('click', async () => {
 getFile()
    });
 async function getFile () {
 // 打开文件选择器   记住FileSystemFileHandle 
        [fileHandle] = await window.showDirectoryPicker()

 if (fileHandle.kind === "file") {
 verifyPermission(fileHandle)
 // 运行针对文件的代码
        } else if (fileHandle.kind === "directory") {
 // 运行针对目录的代码
 verifyPermission(fileHandle)
        }
      }
 async function verifyPermission (fileHandle, withWrite) {
 const opts = {}
 if (withWrite) {
 opts.mode = "readwrite"
        }

 // 检查是否已经拥有相应权限，如果是，返回 true。
 if ((await fileHandle.queryPermission(opts)) === "granted") {
 return true
        }

 // 为文件请求权限，如果用户授予了权限，返回 true。
 if ((await fileHandle.requestPermission(opts)) === "granted") {
 return true
        }

 // 用户没有授权，返回 false。
 return false
      }

2.授权访问权限

3.得到FileSystemFileHandle

4.进行读写文件

FileSystemHandle - Web API 接口参考 | MDN

FileSystemFileHandle：createWritable() 方法 - Web API 接口参考 | MDN

Window：showDirectoryPicker() 方法 - Web API 接口参考 | MDN