在JavaScript中实现批量下载OSS中的文件代码示例
前端  /  管理员 发布于 5个月前   300
使用JS去批量下载OSS文件需要的依赖库
jszip
jszip是一个用于创建、读取和编辑.zip文件的JavaScript库,且API的使用也很简单。
url:
https://stuk.github.io/jszip/
file-saver
著名开源项目 FileSaver.js,在浏览器实现保存文件
url:
https://github.com/eligrey/FileSaver.js
示例代码:
// 下载图片
// files 文件列表
// filename 保存到本地的文件名
function downloadMaterial(files, filename) {
// 使用xhr请求获取文件内容
function getImgBuffer(url) {
return new Promise((reslove, reject) => {
let xmlhttp = new XMLHttpRequest()
xmlhttp.open("GET", url, true)
xmlhttp.responseType = 'blob'
xmlhttp.onload = function () {
if (this.status == 200) {
reslove(this.response)
} else {
reject()
}
}
xmlhttp.send()
})
}
const _zip = new zip()
let promises = []
// 请求多个文件,并把文件打包进 zip (这里先把请求存入 promises 数组, 实际并未请求)
for (let i in files) {
// 这里解释一下为啥用 Math.random()
// 因为 oss 跨域策略是当请求 header 存在 origin 参数时才会返回对应 cors header
// 由于 img 并未发送 origin 参数,所以页面渲染了图片,使用xhr再次请求时会使用缓存的信息,导致浏览器没有获取到允许跨域的 header 导致报错,使用 Math.random() 加了参数就用不到 img 缓存的信息了
const promise = getImgBuffer(`${files[i]}?_r=${Math.random()}`).then((data) => {
_zip.file(files[i].name, data, { binary: true })
})
promises.push(promise)
}
// 使用 Promise all 发送请求
Promise.all(promises).then(() => {
// 生成zip文件
_zip.generateAsync({ type: 'blob' }).then(content => {
// 使用 file-saver保存文件
FileSaver.saveAs(content, filename)
})
}).catch(e => {
console.log(e)
})
}
路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..mashrdn 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了,youtobe无法打开网页,是怎么回事..张伟 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q!有用,不过免费节点隔天就要去git上复制新的导进去..博主 在
科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了,告知大家,免的老有老铁问我!..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号