通过 File System Access API 浏览器读写本地文件

最新推荐文章于 2024-04-08 09:41:05 发布

shengan888

最新推荐文章于 2024-04-08 09:41:05 发布

阅读量1.7k

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/shengan888/article/details/122706363

版权

代码如下：

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<button id="choose" >选择文件</button>
</body>
<script>
/**
* API参考地址：https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
*/
document.getElementById('choose').onclick= async function(){
	
	var [fileHandle] = await window.showOpenFilePicker();
	
	var permission=await fileHandle.queryPermission();
	console.log(permission);

	//获取文件
	const file = await fileHandle.getFile();
	console.log(file);	
	
	//判断文件类型
	if (fileHandle.kind === 'file') {
	   console.log('this is file');
	} else if (fileHandle.kind === 'directory'){
		console.log('this is directory');
		return;
	}
	
	//读取文件内容
    var reader = new FileReader();  
	reader.onload = function() {  
		console.log( this.result);   
	}  
	reader.readAsText(file);  
		
	//创建写文件内容
    const writable = await fileHandle.createWritable();
	
	//写入内容到文件
    await writable.write("this david wirter file content："+new Date().getTime());
	//关闭写入操作，否则内容不会写入到文件
    await writable.close();
			
}

</script>
</html>

API参考链接

https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker

注意事项：

1、授权无需预申请，在保存文件的时候会提示授权

2、发布部署时需要HTTPS才行

本地调试使用localhost或者直接浏览器打开文件都可以

shengan888

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
通过 File System Access API 浏览器读写本地文件

代码如下：<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><button id="choose" >选择文件</button></body><script>/*** API参考地址：https://developer.mozilla.or
复制链接

扫一扫