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

目前该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

相关推荐
IT_陈寒17 分钟前
SpringBoot性能翻倍秘籍:5个90%开发者不知道的JVM调优实战技巧
前端·人工智能·后端
前端灵派派1 小时前
openlayer源码转cesium
前端
Jacob02341 小时前
JavaScript 的进化之旅 Part 2:现代特性与算法优化实战
前端·javascript·性能优化
qb1 小时前
vue3.5.18源码:深入watch api底层实现
前端·vue.js·架构
OEC小胖胖1 小时前
掌握表单:React中的受控组件与表单处理
前端·javascript·react.js·前端框架·react·web
coding随想1 小时前
手机旋转也能触发代码?揭秘前端DeviceOrientation事件的神奇力量!
前端
Mintopia1 小时前
AIGC 训练数据的清洗与标注:技术痛点与自动化方案
前端·javascript·aigc
zzywxc7871 小时前
如何通过 AI IDE 集成开发工具快速生成简易留言板系统
javascript·ide·vue.js·人工智能·spring cloud·架构·dubbo
小喷友1 小时前
第9章 鸿蒙微内核与系统架构
前端·app·harmonyos
Hilaku2 小时前
我最近面试前端,发现一个很有意思的现象..
前端·javascript·面试