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

相关推荐
余防4 分钟前
CSRF跨站请求伪造
前端·安全·web安全·csrf
兮山与9 分钟前
前端2.0
前端
南风木兮丶16 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少29 分钟前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务30 分钟前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
Mintopia37 分钟前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia39 分钟前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc
Olrookie41 分钟前
若依前后端分离版学习笔记(十六)——scoped、路由跳转
前端·笔记
qaqxiaolei41 分钟前
高效办公利器:前端实现表格导出excel格式 + 自定义水印的完整方案
前端·javascript
叫我詹躲躲43 分钟前
为什么Bun.js能在3秒内启动一个完整的Web应用?
前端·javascript·bun