崩溃:在业务开发过程中遇到了“需要下载文件夹及子目录全部文件内容”的需求
后端实现逻辑:
一张目录表(存储文件基础信息),依靠字段区分是文件夹还是文件;
文件夹也只是一条记录,服务器端不存在真正的文件夹。
后端通过 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 项目中会报错,无法执行。
实在是找不到相关解决方法了,求各位大佬指点迷津!
感谢!