纯前端操作文件?

事情是这样的我发现vscode在线版居然可以打开文件目录和文件,还能保存文件。

兼容性一般 目前 谷歌 edge Opera 支持 其他均不支持

vscode.dev/

查了一下MDN 发现增加新的API 了

developer.mozilla.org/zh-CN/docs/...

showDirectoryPicker

这是一项实验性技术 未来版本可能会发生变化 作用就是显示一个目录选择器 返回Promise

js 复制代码
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
showDirectoryPicker().then(async (dir) => {
  const recursion = async (dir) => {
    if (dir.entries) {
      const dirs = dir.entries();
      for await (let item of dirs) {
        item.forEach((file) => {
          if (typeof file === "string") {
            const p = document.createElement("p");
            p.innerText = file;
            p.style.marginLeft = "10px";
            document.querySelector(".result").appendChild(p);
          } else {
            recursion(file);
          }
        });
      }
    }
  };
  recursion(dir);
 });
});

获取选中目录下所有的文件平铺展开

showOpenFilePicker

showOpenFilePicker这个API 返回用户所选的文件 不是目录默认单选 可设置 multiple 多选

js 复制代码
      btn.addEventListener("click", () => {
        showOpenFilePicker().then(async (file) => {
          console.log(await file[0].getFile());
        });
      });

可以调用getFile 返回 File对象 就跟 input file 返回的对象一样了可以操作了。

showSaveFilePicker

showSaveFilePicker 这个API可以写入一个文件 返回promise

js 复制代码
showSaveFilePicker().then(file=>{
  console.log(file);
})
相关推荐
Carlos_sam1 分钟前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录10 分钟前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录31 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区41 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路2 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9492 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8682 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie2 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端