526互联

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

发布时间 2023-04-10 19:07:16作者: 月下云生

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