摘要:需求分析根據七牛存儲的文件,把這些文件打包下載。實現方式,獲取文件內容,使用進行壓縮,最后使用進行保存下載。在請求文件時需要去掉默認的請求頭,同時設置為,否則會導致跨域。
需求分析:根據七牛存儲的文件url,把這些文件打包下載。
實現方式,獲取文件內容,使用 jszip 進行壓縮,最后使用 file-saver 進行保存下載。
需要注意兩點:
1:某些 web框架(比如 laravel) 會給 axios 配置上默認的請求頭。在請求文件時需要去掉默認的請求頭,同時設置Content-type 為"application/x-www-form-urlencoded; charset=UTF-8", 否則會導致跨域。
2:response type 是 binary,文件是以二進制的方式傳過來的,所以要設置 responseType 為 blob.
部分代碼示例:
import JSZip from "jszip" import filesaver from "file-saver" var zip = new JSZip(); // 我用的 axios 需要把這兩個 header 刪掉 delete window.axios.defaults.headers.common["X-Requested-With"]; delete window.axios.defaults.headers.common["X-CSRF-TOKEN"]; axios.get(file.file_url, { responseType: "blob", headers : { "Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8" } }).then(function(res){ var response = res.data; zip.file(file.id + "_" + file.name, response, {binary: true}); // do your job }).catch(function(error){ console.error(error); });
保存:
zip.generateAsync({ type: "blob" }).then((blob) => { filesaver.saveAs(blob, this.current_zip_name) }, (err) => { alert("導出失敗") });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97162.html
摘要:原文服務器端文件分片合并的思考和實踐筆者在項目中處理大文件上傳的需求,仿照七牛云存儲的接口設計。然而,在服務器端文件合并時遇到了很大的問題合并太慢。服務器端的分片合并現在進入本文的重點。 原文:服務器端文件分片合并的思考和實踐 筆者在項目中處理大文件上傳的需求,仿照七牛云存儲的接口設計。然而,在服務器端文件合并時遇到了很大的問題:合并太慢。本文記錄了當時的思路和解決的方案 大文件的...
摘要:七牛的,到獲取,登錄七牛后在七牛的帳號設置密鑰中可找到。要備份的網站代碼目錄。計劃任務腳本定時執行時間,默認凌晨分進行備份配置內容結束。 20140211234856 這是我公開發布的第一個Shell腳本程序,這能極大的方便Linux服務器管理員使用它自動備份數據到七牛云存儲。 應網友需求發布了Windows版本,詳情見:http://wyr.me/330.html 這個Linux...
摘要:為了滿足以上需求,就需要制作打包腳本和工具,來滿足正常的運維。離線資源生成工具離線資源的生成,我們提供了一個工具可以打包出增量和全量升級包。比如和需要統一成。 目錄 背景 離線資源生成工具 前端協助 背景 由于線上樂刻客戶端 App 第一次打開平臺 H5 需要幾秒的加載時間,這個體驗對用戶來說并不友好,為了讓用戶跳轉 H5 和跳轉到原生一樣的用戶體驗,就需要把 H5 相關的離線資源...
摘要:為了滿足以上需求,就需要制作打包腳本和工具,來滿足正常的運維。離線資源生成工具離線資源的生成,我們提供了一個工具可以打包出增量和全量升級包。比如和需要統一成。 目錄 背景 離線資源生成工具 前端協助 背景 由于線上樂刻客戶端 App 第一次打開平臺 H5 需要幾秒的加載時間,這個體驗對用戶來說并不友好,為了讓用戶跳轉 H5 和跳轉到原生一樣的用戶體驗,就需要把 H5 相關的離線資源...
閱讀 3178·2019-08-30 15:55
閱讀 2950·2019-08-30 13:46
閱讀 1451·2019-08-29 17:29
閱讀 3521·2019-08-29 11:08
閱讀 3444·2019-08-29 11:04
閱讀 1091·2019-08-28 18:20
閱讀 551·2019-08-26 13:37
閱讀 1332·2019-08-26 11:49