Vue批量下载并打包成zip
第一次写博客,主要是记录一下此次工作中的一个需求,后端大佬有点忙,前端小弟只好自己上手了
需求描述很简单:
在手机端上传的图片、视频到pc端下载成一个压缩包文件zip,解压后可正常查看
学习了网上一些例子,做了一些修改
1.依赖包
axios、jszip、file-saver
import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
2.重写请求方法(主要是因为项目中用的axios是封装好的,所以直接在页面中引入了一个)
methods: {
getFile(url){
let that = this;
return new Promise((resolve, reject) => {
axios({
method:'get',
url,
responseType: 'blob'
}).then(data => {
resolve(data.data)
}).catch(error => {
// 在此写入你的错误处理
// 可以在此处处理promise.all失败的情况,放在methods里主要也是为了方便对data里的变量处理
reject(error.toString())
})
})
},
}
3.下载文件
methods:{
handleBatchDownload() {
const data = [
'/zip/1.mp4',
'/zip/2.png'] // 需要下载打包的路径, 此处我是阿里云的跨域路径, /zip来源 参看第四条
const zip = new JSZip()
const cache = {}
const promises = []
data.forEach(item => {
const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
const arr_name = item.split("/")
const file_name = arr_name[arr_name.length - 1] // 获取文件名
zip.file(file_name, data, { binary: true }) // 逐个添加文件
cache[file_name] = data
})
promises.push(promise)
})
Promise.all(promises).then(() => {
zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
FileSaver.saveAs(content, "打包下载.zip") // 利用file-saver保存文件
})
})
},
}
4.设置代理(我是用/zip来设置本地代理的xxx.aliyun.com,当然也要修改线上nginx配置等)
proxyTable: {
'/zip': {
target: 'http://xxx.aliyun.com/', //目标接口域名
pathRewrite: {
'^/zip': '' //重写接口
},
changeOrigin: true, //是否跨域
},
},
总结
其实只是在网上一些例子的基础上多加了一步代理,不知道别人是如何解决跨域这个问题的,简单做一下记录,有什么问题也欢迎指正
参考链接:点这里