学习新的浏览器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
标签:API,文件,const,src,System,api,File,浏览器,fileData From: https://www.cnblogs.com/foxing/p/17303988.html