首页 > 其他分享 >使用浏览器api操作本地文件 File System Access API

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

时间:2023-04-10 19:15:14浏览次数:52  
标签:API 文件 const src System api File 浏览器 fileData

学习新的浏览器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

 

标签:API,文件,const,src,System,api,File,浏览器,fileData
From: https://www.cnblogs.com/foxing/p/17303988.html

相关文章

  • Solution Set - APIO2013
    目录A.机器人B.道路费用C.出题人A机器人key:点击查看代码B道路费用key:点击查看代码C出题人提交答案题。key:点击查看代码......
  • WebAssembly 助力云原生:APISIX 如何借助 Wasm 插件实现扩展功能?
    本文将介绍Wasm,以及ApacheAPISIX如何实现Wasm功能。作者朱欣欣,API7.ai技术工程师原文链接什么是WasmWasm是WebAssembly的缩写。WebAssembly/Wasm是一个基于堆栈的虚拟机设计的指令格式。在Wasm未出现之前,浏览器中只能支持运行Javascript语言。当Wasm出现......
  • 为什么 APISIX Ingress 是比 Emissary-ingress 更好的选择?
    本文从可扩展性和服务发现集成等多个维度对比了APISIXIngress与Emissary-ingress的性能。作者:容鑫,API7.ai云原生技术工程师,ApacheAPISIXCommitter。原文链接背景KubernetesIngress是一种API对象,用于定义集群外部流量如何路由到集群内部服务的规则。IngressCont......
  • 翻译文本 API说明示例
    t_text-翻译文本名称 类型 必须 描述key String 是 调用key(必须以GET方式拼接在URL中)secret String 是 调用密钥(获取key和secret)api_name String 是 API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等]cache String 否 [yes,no]默认yes,将调用缓存的数据,速度比......
  • 景顺长城基于 Apache APISIX 在金融云原生的生产实践
    本文介绍了景顺长城在金融云原生架构演进中选择APISIX作为网关工具的技术细节,同时分享了使用APISIX的实践细节,并对APISIX的未来展望进行了探讨。作者李奕浩,景顺长城信息技术部研发工程师,负责公司网关和业务系统上云等工作。业务背景景顺长城基金管理有限公司成立于200......
  • API概念
    API(ApplicationProgrammingInterface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。抽象类与普通类相比 约定了子类实现要求 单继承局限因此,提出了接口在以后的开发......
  • 分享(四):免费可用的 API 大全总结(持续更新中)
    写在前面随着互联网的发展,越来越多的API被开发出来,使得开发人员可以更快速地开发和部署应用程序,下面我将向大家推荐一些免费可用的API。 天气出行类天气预报查询:支持全国以及全球多个城市的天气查询,包含15天天气预报查询。尾号限行:提供已知所有执行限行政策的共计65个大城......
  • 天气预报查询 API + AI 等于王炸(一大波你未曾设想的天气预报查询 API 应用场景更新了)
    前言近年来,随着信息化进程的不断深入,人们对于信息的获取和处理需求越来越高。而其中,天气查询API是一个非常重要的服务,它能够帮助人们快速获取所在位置的天气情况,同时也为各类应用提供了必要的气象数据支持。本文将介绍天气查询API的技术原理、实际应用场景以及获取API的方法......
  • 第9章 使用MVC为移动和客户端应用程序创建Web API(ASP.NET Core in Action, 2nd Editio
    本章包括创建WebAPI控制器以向客户端返回JSON使用属性路由自定义URL使用内容协商生成响应使用[ApiController]属性应用通用约定在前五章中,您已经完成了服务器端渲染ASP.NETCore应用程序的每一层,使用RazorPages将HTML渲染到浏览器。在本章中,您将看到对ASP.NETCore应用程......
  • failed to solve with frontend dockerfile.v0
    问题描述didi@didis-MacBook-Proipmi_exporter%dockerbuild-tipmi_exporter:0.1.[+]Building0.1s(1/2)=>[internal]loadbuil......