最近工作中有个需求是多文件保存功能,写完之后感觉可以分享一下。
此篇文章将讲解如何在浏览器和electron两种终端上实现图片、视频、文档三种类型文件的多文件保存功能,展示的代码也仅是有关多文件保存的技术代码。用到的技术是electron+vue3+vite。
一、浏览器的多文件保存
1、打开选择文件夹弹窗
// 打开选择文件夹弹窗
const handle = await window.showDirectoryPicker({});
2、实现文件保存指定路径的功能
注意:下述提到的文件数组是需要保存的文件信息,处理数组数据,确保其中包含文件名fileName和文件下载地址url两种字段数据。
2.1、遍历数组,依次获取文件的引用
// 遍历文件数组
filesList.forEach(async (item) => {
// 获取文件的引用
const fileHandle = await handle.getFileHandle(item.fileName, {create: true});
})
2.2、将文件url转换为blob格式
// 将url转换为blob格式
const blob = await urlToBlob(item.url);
// 将url转换为blob的函数
function urlToBlob(url) {
return new Promise((resolve) => {
fetch(url).then(response => response.blob())
.then(res => {
var blod = new Blob([res]);
resolve(blod);
})
})
}
2.3、创建可写入的文件对象,并写入文件,最后关闭写入操作
// 创建可写入的文件对象
const writeable = await fileHandle.createWritable();
// 写入内容:blob格式
await writeable.write(blob);
// 关闭写入
await write.close();
2.4、完整代码
// 保存文件列表函数
async function saveFileList(filesList: any) {
try {
// 打开选择文件夹弹框
const handle = await window.showDirectoryPicker({});
// 遍历文件数组
filesList.forEach(async (item) => {
// 获取文件的引用
const fileHandle = await handle.getFileHandle(item.fileName, {create: true});
// 将url转换为blob格式
const blob = await urlToBlob(item.url);
// 创建可写入的文件对象
const writeable = await fileHandle.createWritable();
// 写入内容:blob格式
await writeable.write(blob);
// 关闭写入
await write.close();
});
}catch(error){
console.log(error)
}
}
// 将url转换为blob的函数
function urlToBlob(url) {
return new Promise((resolve) => {
fetch(url).then(response => response.blob())
.then(res => {
var blod = new Blob([res]);
resolve(blod);
})
})
}
二、electron的多文件保存
与浏览器的实现步骤大体相同,代码如下:
1、打开文件夹弹窗
// browserWindow 是可选的,弹出来的dialog是附着在这个browserWindow上。
const result = await dialog.showOpenDialog([browserWindow,] {
// 调用electron的打开文件弹窗,设置只能选择文件夹
properties: ['openDirectory']
})
2、实现文件保存的功能
2.1、拿到路径数据
// 用户选择的路径
let directoryPath = result.filePaths[0];
2.2、遍历数组,依次拼接每个文件路径;并下载文件。
filesList.map(async ({url, fileName}) => {
// 拼接文件路径
const destPath = path.join(directoryPath, fileName);
// 请求接口 下载文件 以流的形式获取响应体,用于写入文件
const response = await axios({
method: 'get',
url: url,
responseType: 'stream'
})
})
2.3、将数据流保存到文件中。
const ws = fs.createWriteStream(destPath);
// 将数据流保存到文件中
response.data.pipe(ws);
2.4、完整代码
// 多文件下载保存
async function(event, filesList) {
try {
const result = await dialog.showOpenDialog([browserWindow,] {
//调用electron的打开文件弹窗,设置只能选择文件夹
properties: ['openDirectory']
});
if(!result.canceled) {
// 用户选择的路径
let directoryPath = result.filePaths[0];
const filePromises = filesList?.map(async ({url, fileName}) =>{
// 获取目标文件的路径
const destPath = path.join(directoryPath, fileName);
// 请求接口 下载文件
const response = await axios({
method: 'get',
url: url,
responseType: 'stream' // 以流的形式获取响应体,用于写入文件
});
const ws = fs.createWriteStream(destPath);
// 将数据流保存到文件中
response.data.pipe(ws);
return new Promise((resolve, reject) => {
ws.on('finish', () => {
resolve(destPath);
})
ws.on('error', () =>{
reject(err);
})
})
})
await Promise.all(filePromises);
console.log('保存成功,做成功后的页面优化')
}else {
console.log('保存失败,做失败后的页面优化')
}
}catch(err) {
console.log('保存失败,做失败后的页面优化')
}
}
三、成果展示
1、触发保存操作
2、选择保存路径
3、成功保存到指定目录
综上,多文件下载保存功能就成功实现了,如文章中有任务不对的地方,欢迎指正。