成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js 打包七牛文件并下載zip

gotham / 1122人閱讀

摘要：需求分析根據(jù)七牛存儲(chǔ)的文件，把這些文件打包下載。實(shí)現(xiàn)方式，獲取文件內(nèi)容，使用進(jìn)行壓縮，最后使用進(jìn)行保存下載。在請(qǐng)求文件時(shí)需要去掉默認(rèn)的請(qǐng)求頭，同時(shí)設(shè)置為，否則會(huì)導(dǎo)致跨域。

需求分析：根據(jù)七牛存儲(chǔ)的文件url，把這些文件打包下載。

實(shí)現(xiàn)方式，獲取文件內(nèi)容，使用 jszip 進(jìn)行壓縮，最后使用 file-saver 進(jìn)行保存下載。

需要注意兩點(diǎn)：

1：某些 web框架（比如 laravel） 會(huì)給 axios 配置上默認(rèn)的請(qǐng)求頭。在請(qǐng)求文件時(shí)需要去掉默認(rèn)的請(qǐng)求頭，同時(shí)設(shè)置Content-type 為"application/x-www-form-urlencoded; charset=UTF-8"， 否則會(huì)導(dǎo)致跨域。

2：response type 是 binary，文件是以二進(jìn)制的方式傳過來的，所以要設(shè)置 responseType 為 blob.

部分代碼示例：

import JSZip from "jszip"
import filesaver from "file-saver"

var zip = new JSZip();

// 我用的 axios 需要把這兩個(gè) 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("導(dǎo)出失敗")
});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97162.html

相關(guān)文章

  • 服務(wù)器端文件分片合并的思考和實(shí)踐

    摘要：原文服務(wù)器端文件分片合并的思考和實(shí)踐筆者在項(xiàng)目中處理大文件上傳的需求，仿照七牛云存儲(chǔ)的接口設(shè)計(jì)。然而，在服務(wù)器端文件合并時(shí)遇到了很大的問題合并太慢。服務(wù)器端的分片合并現(xiàn)在進(jìn)入本文的重點(diǎn)。 原文：服務(wù)器端文件分片合并的思考和實(shí)踐 筆者在項(xiàng)目中處理大文件上傳的需求，仿照七牛云存儲(chǔ)的接口設(shè)計(jì)。然而，在服務(wù)器端文件合并時(shí)遇到了很大的問題：合并太慢。本文記錄了當(dāng)時(shí)的思路和解決的方案 大文件的...

    huaixiaoz 評(píng)論0 收藏0

  • 原創(chuàng)自動(dòng)備份Linux服務(wù)器數(shù)據(jù)到七牛云存儲(chǔ)Shell腳本程序-用七牛自動(dòng)備份VPS中的網(wǎng)站數(shù)據(jù)

    摘要：七牛的，到獲取，登錄七牛后在七牛的帳號(hào)設(shè)置密鑰中可找到。要備份的網(wǎng)站代碼目錄。計(jì)劃任務(wù)腳本定時(shí)執(zhí)行時(shí)間，默認(rèn)凌晨分進(jìn)行備份配置內(nèi)容結(jié)束。 20140211234856 這是我公開發(fā)布的第一個(gè)Shell腳本程序，這能極大的方便Linux服務(wù)器管理員使用它自動(dòng)備份數(shù)據(jù)到七牛云存儲(chǔ)。 應(yīng)網(wǎng)友需求發(fā)布了Windows版本，詳情見：http://wyr.me/330.html 這個(gè)Linux...

    KavenFan 評(píng)論0 收藏0

  • Hybird-離線資源生成工具

    摘要：為了滿足以上需求，就需要制作打包腳本和工具，來滿足正常的運(yùn)維。離線資源生成工具離線資源的生成，我們提供了一個(gè)工具可以打包出增量和全量升級(jí)包。比如和需要統(tǒng)一成。 目錄 背景 離線資源生成工具 前端協(xié)助 背景 由于線上樂刻客戶端 App 第一次打開平臺(tái) H5 需要幾秒的加載時(shí)間，這個(gè)體驗(yàn)對(duì)用戶來說并不友好，為了讓用戶跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶體驗(yàn)，就需要把 H5 相關(guān)的離線資源...

    siberiawolf 評(píng)論0 收藏0

  • Hybird-離線資源生成工具

    摘要：為了滿足以上需求，就需要制作打包腳本和工具，來滿足正常的運(yùn)維。離線資源生成工具離線資源的生成，我們提供了一個(gè)工具可以打包出增量和全量升級(jí)包。比如和需要統(tǒng)一成。 目錄 背景 離線資源生成工具 前端協(xié)助 背景 由于線上樂刻客戶端 App 第一次打開平臺(tái) H5 需要幾秒的加載時(shí)間，這個(gè)體驗(yàn)對(duì)用戶來說并不友好，為了讓用戶跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶體驗(yàn)，就需要把 H5 相關(guān)的離線資源...

    hedge_hog 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<