使用浏览器api操作本地文件 File System Access API

学习新的浏览器api:showOpenFilePicker,showDirectoryPicker,getDirectoryHandle,getFileHandle,removeEntry

之前文件上传使用的是:

<input type="file">

今天看到直接使用浏览器api即可实现文件读取,文件删除,写入等,局限性:

  1. 需要https环境,如果是本地localhost 不受此限制。
  2. 不能在 iframe 内使用,因为被认为不安全
  3. 新个新的api,兼容性不好,在最新的chrome最好
<button @click="importFile">读取图片</el-button>
复制代码
const importFile = async () => {
    imgList.value = []
    const arrFileHandle = await window.showOpenFilePicker({
        types: [{
            accept: {
                'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
            }
        }],
        // 可以选择多个图片
        multiple: true
    });

    // 遍历选择的文件
    for (const fileHandle of arrFileHandle) {
        // 获取文件内容
        const fileData = await fileHandle.getFile();
        console.log(fileData);

        // 读文件数据
        const buffer = await fileData.arrayBuffer();
        // 转成Blod url地址
        let src = URL.createObjectURL(new Blob([buffer]));
        // 在页面中显示
        imgList.value.push(src)
    }
}
复制代码

代码地址:https://gitee.com/yuexiayunsheng/vue3learn/blob/master/src/views/FilesOpera.vue

 

posted @   月下云生  阅读(459)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示