js实现oss批量下载文件_远程URL文件批量下载打包的方法

开始

最近代码重构遇到了一个问题，需要把OSS 上的一批图片打包下载

旧服务器的硬盘是直接挂载OSS，所以直接调的Linux系统命令复制打包，所以速度比较快。新服务器重构代码行不通，这样做也不好

查阅OSS并没有提供相关API(七牛支持)

解决方法：

PASS掉 PHP后台fetch图片到内存然后进行打包输出给前端(图片有ai,psd内存撑不住)

PASS掉 PHP后台fetch图片到服务器硬盘，然后进行打包输出一个临时链接给前端(同上，文件太大，导致fetch时间和打包的时间太久)

JS 尝试通过前端请求后端，后端返回文件信息，然后前端异步请求所有文件，最后在前端打包下载

前提

想法很好，并且已经有人这样做了，我们只用考虑按照别人的做法坐下去

前端打包有两个前提：

跨域问题，需要运维在OSS或者下载的资源服务器设置允许跨域

CDN问题，让运维配置一个新域名不要走CDN(如没使用CDN可忽略)

步骤

直接下载这两个库，然后把dist/下的文件放入到项目，也可以用github提供的方式引入

部分逻辑代码如下

// 引入文件

let total = 0;

let progress = 0;

// 可通过按钮或者其它事件触发

$.get('/urls', function(res) {

// 假设 res.data 是后端返回的一组远程数据对象

// {url: 'x.jpg', filename: 'xx.jpg', path: 'xxxx'}

total = res.data.length;

if (total === 0) {

console.error('图集无图片可下载');

return;

}

let zip = new JSZip();

// map 存储 folder 对象

let folderMap = {};

// 遍历所有后端返回的 urls

res.data.map(function (data) {

// 获取远程资源数据

JSZipUtils.getBinaryContent(

data.url,

function (err, binData) {

++ progress;

if (err && progress < total) {

console.log(err);

return;

}

// 第一次实例化 folder 对象

if (! folderMap[data.path]) {

folderMap[data.path] = zip.folder(data.path);

}

let pf = folderMap[data.path];

// 第三个参数必须设置，否则下载的文件将产生错误

pf.file(data.filename, binData, {binary: true});

if (progress === total) {

console.log('请稍等，数据打包中');

zip.generateAsync({type:"blob"}).then(function(content) {

// 下载文件

const link = document.createElement('a');

link.href = window.URL.createObjectURL(content);

link.download = 'data.zip';

link.click();

document.body.removeChild(link);

});

}

);

})

完成之后，发现效果还不错。速度也比后端的来的块。毕竟不经过后端。而且可以多个请求异步处理。

js实现oss批量下载文件_远程URL文件批量下载打包的方法相关推荐

gin 前端文件打包_远程URL文件批量下载打包的方法
开始最近代码重构遇到了一个问题,需要把OSS 上的一批图片打包下载旧服务器的硬盘是直接挂载OSS,所以直接调的Linux系统命令复制打包,所以速度比较快.新服务器重构代码行不通,这样做也不好查阅 ...
java从远程url文件流读取文件并下载到本地
java从远程url文件流读取文件,且下载到本地,写个循环可实现批量 import java.io.*; import java.net.HttpURLConnection; import java. ...
xshell下载mysql到本地文件_在Xshell中上传下载文件到本地（linux中从多次ssh登录的dbserver里面的文件夹）-Go语言中文社区...
在Xshell中上传下载文件到本地(linux中从多次ssh登录的dbserver里面的文件夹) 1 列出所有需要copy的sh文件 -bash-4.1$ ll /mysqllog/osw/*.sh ...
前端将二进制数据流转为文件_前端通过二进制流下载文件
JS下载文件两种方式总结: 下载文件主要分为两种形式,具体使用哪种方式取决于后台: 1.如果后台服务器的静态目录有可供下载的静态资源,后台接口返回文件路径,直接window.location.href ...
java文件批量改名代码_[原创]JAVA版批量更名程序（附源码）（要求加分）
这是上学时JAVA课程的课程实践,因为学习好,老师让写一个比较有难度的程序出来,不要随便写个简单的来应付. 当时也不知道什么类型的程序在JAVA里比较有难度,正好在JAVA中文论坛里看到有人问用JAV ...
python怎么批量下载年报_如何使用python批量下载统计年鉴中的excel网页？
我们在使用python爬取数据时有时会碰到这样一种情况,有一些网站一点击并不会弹出一个网页,而是直接下载一个excel或者jpg文件.这种情况当然是好的,不用爬虫,就能直接下载数据了,但是有时候需要批 ...
ncl批量处理多个nc文件_【批处理】批量创建多个文件夹
置顶公众号,否则不能及时收到新文章推荐给朋友,让朋友也能收到免费文章公众号发送VBA或应用的关键字,即可免费获取对应教程一.前言我们在工作中,往往需要对资料进行归类,因而需要创建很多文件夹,比 ...
java 微信企业号上传文件_微信企业号上传下载多媒体文件接口详解演示-java
讲完这篇博客,微信企业号的接口就说完了,下载了我源码的童鞋都知道,里面的备注很详细,但凡看过几遍就都会自己开发了,我说的这些接口至此我已经全部开发完了,剩下的就是你们自己写功能了,都是轻而易举的事情了 ...
python 批量移动文件_[Python] 自动化办公批量命名和移动文件
转载请注明:陈熹 chenx6542@foxmail.com (简书号:半为花间酒) 若公众号内转载请联系公众号:早起Python 这篇文章能学到的主要内容: 基于 os glob 和 shutil ...
tomcat temp 大量 upload 文件_渗透测试之文件上传漏洞总结
文末下载上传环境源码客户端 js检查一般都是在网页上写一段javascript脚本,校验上传文件的后缀名,有白名单形式也有黑名单形式. 查看源代码可以看到有如下代码对上传文件类型进行了限制: 我们 ...

js实现oss批量下载文件_远程URL文件批量下载打包的方法

js实现oss批量下载文件_远程URL文件批量下载打包的方法相关推荐

最新文章

热门文章