開始

• 最近代碼重構(gòu)遇到了一個問題，需要把OSS 上的一批圖片打包下載
• 舊服務(wù)器的硬盤是直接掛載OSS，所以直接調(diào)的Linux系統(tǒng)命令復(fù)制打包，所以速度比較快。新服務(wù)器重構(gòu)代碼行不通，這樣做也不好
• 查閱OSS并沒有提供相關(guān)API(七牛支持)

解決方法：

• PASS掉 PHP后臺fetch圖片到內(nèi)存然后進行打包輸出給前端(圖片有ai,psd內(nèi)存撐不住)
• PASS掉 PHP后臺fetch圖片到服務(wù)器硬盤，然后進行打包輸出一個臨時鏈接給前端(同上，文件太大，導(dǎo)致fetch時間和打包的時間太久)
• JS 嘗試通過前端請求后端，后端返回文件信息，然后前端異步請求所有文件，最后在前端打包下載

---

前提

想法很好，并且已經(jīng)有人這樣做了，我們只用考慮按照別人的做法坐下去 前端打包有兩個前提： 1. 跨域問題，需要運維在OSS或者下載的資源服務(wù)器設(shè)置允許跨域 2. CDN問題，讓運維配置一個新域名不要走CDN(如沒使用CDN可忽略)

---

步驟

• 使用https://github.com/Stuk/jszip這個庫打包文件
• 使用https://github.com/Stuk/jszip-utils獲取遠程數(shù)據(jù)（直接通過AJAX獲取，需要轉(zhuǎn)換格式）
• 直接下載這兩個庫，然后把dist/下的文件放入到項目，也可以用github提供的方式引入
• 部分邏輯代碼如下

// 引入文件 <script type="text/javascript" src="/xxx/jszip.min.js"></script> <script type="text/javascript" src="/xxx/jszip-utils.min.js"></script> <!--[if IE]> <script type="text/javascript" src="/xxx/jszip-utils-ie.min.js"></script> <![endif]--> <script> let total = 0; let progress = 0;// 可通過按鈕或者其它事件觸發(fā) $.get('/urls', function(res) {// 假設(shè) res.data 是后端返回的一組遠程數(shù)據(jù)對象// {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 = {};// 遍歷所有后端返回的 urlsres.data.map(function (data) {// 獲取遠程資源數(shù)據(jù)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];// 第三個參數(shù)必須設(shè)置，否則下載的文件將產(chǎn)生錯誤pf.file(data.filename, binData, {binary: true});if (progress === total) {console.log('請稍等，數(shù)據(jù)打包中');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);});}});}) }) </script>

---

完成之后，發(fā)現(xiàn)效果還不錯。速度也比后端的來的塊。畢竟不經(jīng)過后端。而且可以多個請求異步處理。

總結(jié)

以上是生活随笔為你收集整理的gin 前端文件打包_远程URL文件批量下载打包的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。