js 打包七牛文件并下载zip

gotham 发布于2019-08-23 11:35 / 1034人阅读

摘要：需求分析根据七牛存储的文件，把这些文件打包下载。实现方式，获取文件内容，使用进行压缩，最后使用进行保存下载。在请求文件时需要去掉默认的请求头，同时设置为，否则会导致跨域。

需求分析：根据七牛存储的文件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("导出失败")
});

GPU云服务器云服务器文件打包zip 读取服务器文件并下载如何连接阿里云服务器并下载文件 js 生成zip文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97162.html

服务器端文件分片合并的思考和实践

摘要：原文服务器端文件分片合并的思考和实践笔者在项目中处理大文件上传的需求，仿照七牛云存储的接口设计。然而，在服务器端文件合并时遇到了很大的问题合并太慢。服务器端的分片合并现在进入本文的重点。原文：服务器端文件分片合并的思考和实践笔者在项目中处理大文件上传的需求，仿照七牛云存储的接口设计。然而，在服务器端文件合并时遇到了很大的问题：合并太慢。本文记录了当时的思路和解决的方案大文件的...

huaixiaoz 2019-07-25 13:24 评论0 收藏0
原创自动备份Linux服务器数据到七牛云存储Shell脚本程序-用七牛自动备份VPS中的网站数据

摘要：七牛的，到获取，登录七牛后在七牛的帐号设置密钥中可找到。要备份的网站代码目录。计划任务脚本定时执行时间，默认凌晨分进行备份配置内容结束。 20140211234856 这是我公开发布的第一个Shell脚本程序，这能极大的方便Linux服务器管理员使用它自动备份数据到七牛云存储。应网友需求发布了Windows版本，详情见：http://wyr.me/330.html 这个Linux...

KavenFan 2019-06-27 10:34 评论0 收藏0
Hybird-离线资源生成工具

摘要：为了满足以上需求，就需要制作打包脚本和工具，来满足正常的运维。离线资源生成工具离线资源的生成，我们提供了一个工具可以打包出增量和全量升级包。比如和需要统一成。目录背景离线资源生成工具前端协助背景由于线上乐刻客户端 App 第一次打开平台 H5 需要几秒的加载时间，这个体验对用户来说并不友好，为了让用户跳转 H5 和跳转到原生一样的用户体验，就需要把 H5 相关的离线资源...

siberiawolf 2019-06-27 16:37 评论0 收藏0
Hybird-离线资源生成工具

摘要：为了满足以上需求，就需要制作打包脚本和工具，来满足正常的运维。离线资源生成工具离线资源的生成，我们提供了一个工具可以打包出增量和全量升级包。比如和需要统一成。目录背景离线资源生成工具前端协助背景由于线上乐刻客户端 App 第一次打开平台 H5 需要几秒的加载时间，这个体验对用户来说并不友好，为了让用户跳转 H5 和跳转到原生一样的用户体验，就需要把 H5 相关的离线资源...

hedge_hog 2019-08-20 16:51 评论0 收藏0