web端控制本地磁盘文件新增好用api

核心api:showDirectoryPicker

新增好用api，使得web端可以直接操作本地磁盘的文件内容，进行增删改查。

 

兼容性需要注意，chrome，edge，opera可以使用。

localhost,和https可以使用。http不行。

主要是File Api

 

 

 

 

通过拿到句柄去操作文件。

btn.onclick=async function aaa() {
    try{
        let handler=await window.showDirectoryPicker();
        let root=await processHandle(handler)//将文件夹做成树状结构 拿到 根节点
        console.log('root',root)
        const file=await  root.children[0].getFile()
        const reader=new FileReader();
        reader.readAsText(file,'utf-8')//读取文件
        // reader.readAsArrayBuffer(file)
         reader.onload=(e)=>{
             console.log(e.target.result)
         }


    }
    catch {}

}

async function processHandle(handler){
    if(handler.kind==='file'){//如果是文件直接拿到句柄
        return handler
    }
    handler.children=[]
    const iter=await handler.entries()
    //io流操作都需要异步
    for await (const info of iter){   
       const subHandle=await  processHandle(info[1])//如果是文件夹继续递归遍历
        handler.children.push(subHandle)
    }
    return handler
}//遍历文件夹  有两种类型 要么是文件要么是文件夹

     
        const w$ = await root.children[0].createWritable();
        await w$.write('hello ');  
        await w$.write('world');     
        await w$.close();//删除

 const newDir= await root.children[0].getDirectoryHandle("NewDir", {            create: true,          });
 //创建

可供参考：https://www.cnblogs.com/ajanuw/p/13788051.html

https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker