求助!Vue2 获取本地文件夹路径,创建文件夹 SystemFileAPI 无效问题

123 阅读1分钟

崩溃:在业务开发过程中遇到了“需要下载文件夹及子目录全部文件内容”的需求

image.png

image.png

后端实现逻辑:

一张目录表(存储文件基础信息),依靠字段区分是文件夹还是文件;

文件夹也只是一条记录,服务器端不存在真正的文件夹。

后端通过 Minio 进行文件存储,下载功能是通过获取 Minio Client 的分享URL,a 标签触发下载,默认到浏览器配置的下载地址。

通过网上资料了解到 File System Access API

自己通过 html 示例发现可以获取到选择的文件夹,并创建文件夹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Create Folder Example</title>
    <script type="text/javascript">
        async function createFolder() {
            try {
                // 使用 window.showDirectoryPicker() 触发用户选择一个目录
                const dirHandle = await window.showDirectoryPicker();
                // 创建第一个新文件夹
                const firstFolderHandle = await dirHandle.getDirectoryHandle('newFolder', { create: true });
                // 在第一个新文件夹内创建第二个新文件夹
                await firstFolderHandle.getDirectoryHandle('innerFolder', { create: true });
                alert('Folders created successfully!');
            } catch (err) {
                alert(`Error creating folder: ${err.name}`);
            }
        }
    </script>
</head>
<body>
    <input type="button" value="Choose Directory and Create Folder" onclick="createFolder()" />
</body>
</html>

上方代码在本地创建 html 并运行,可以完美实现选择文件夹并创建新文件

但我将代码中的 window.showDirectoryPicker() 插入到现有的 vue2 项目中会报错,无法执行。

image.png

实在是找不到相关解决方法了,求各位大佬指点迷津!

感谢!