開始

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

解決方法：

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

---

前提

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

---

步驟

• 使用https://github.com/Stuk/jszip這個庫打包文件
• 使用https://github.com/Stuk/jszip-utils獲取遠程數據（直接通過AJAX獲取，需要轉換格式）
• 直接下載這兩個庫，然后把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;// 可通過按鈕或者其它事件觸發 $.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 = {};// 遍歷所有后端返回的 urlsres.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);});}});}) }) </script>

---

完成之后，發現效果還不錯。速度也比后端的來的塊。畢竟不經過后端。而且可以多個請求異步處理。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。