浏览器下载web服务器文件夹

默认情况下,通过浏览器下载文件只能存放在浏览器默认下载位置,好在谷歌的file system access api可以在用户交互式同意的情况下,可以对用户选择的本地文件夹进行写入。这样可以将服务器上的文件夹整个下载到本地指定目录下。
另外axios在1.7.0 和之后的版本,正式内置了 fetch adapter 的支持,这对我等习惯用axios的开发者是更加方便了。为什么说axios支持fetch adapter,这么重要呢?因为axios在后端是支持responseType: stream,但是在前端一直都没有支持responseType: stream 如果要流式下载文件得使用fetch,对于习惯用axios的伙伴们自然是比较痛苦的。现在好了,虽然axios默认不开启用fetch adapter,但是启用也就是多一条命令而已。
那为什么要用stream下载文件,用blob不香么?那是因为如果下载大文件,几十GB,上百GB的,你用blob试试看?后端直接stream方式读取大文件管道对接到response,前端收到response的stream data,管道对接到本地写文件流,服务器和前端资源占用都很少,爽得飞起。
好了,不说废话了,直接上代码

<html>
<script src="./axios.min.js">script>
<body>
<button onclick="saveFile()">请选择本地下载文件夹butto>

<script>
const fetchAxios = axios.create({ adapter: 'fetch' });
let filepaths=[
	"userdir/file0.jpg",
	"userdir/subdir1/file1.jpg",
	"userdir/subdir2/file2.jpg",
	]

const saveFile = async () => { 
	const handle = await window.showDirectoryPicker({ mode: "readwrite" }); 

	for  (let i=0; i<filepaths.length; i++) {
		let sdhandle=handle;
		item=filepaths[i]
		let arr=item.split('/');
		for (let j=0;j<arr.length-1;j++) { sdhandle=await sdhandle.getDirectoryHandle(arr[j], { create: true }); }
		let fh=await sdhandle.getFileHandle(arr[arr.length-1], { create: true });
		let writable = await fh.createWritable(); 
		fetchAxios({
			method: 'get',
			url: item,      //demo就简单点,没有写后端服务代码
			responseType: 'stream'
			}).then(res=>{ res.data.pipeTo(writable); });
		}
	}
script>
body>
html>

你可能感兴趣的:(前端,服务器,后端,chrome,edge浏览器)