使用浏览器api操作本地文件 File System Access API
学习新的浏览器api:showOpenFilePicker,showDirectoryPicker,getDirectoryHandle,getFileHandle,removeEntry
之前文件上传使用的是:
<input type="file">
今天看到直接使用浏览器api即可实现文件读取,文件删除,写入等,局限性:
- 需要https环境,如果是本地localhost 不受此限制。
- 不能在 iframe 内使用,因为被认为不安全
- 新个新的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
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库