web前端批量下载文件和图片探索

11 篇文章 0 订阅
4 篇文章 0 订阅

1.图片,文件批量下载(不跨域的情况下)

import JSZip from 'jszip';
import {saveAs} from 'file-saver';
import axios from 'axios'
const getFile = url => {
    return new Promise((resolve, reject) => {
        let obj = {
            method: 'get',
            url,
            // responseType: 'blob'
            responseType: 'arraybuffer'
        }
        axios(obj)
            .then(data => {
                resolve(data.data)
            })
            .catch(error => {
                reject(error.toString())
            })
    })
}


const fileList = [
     'http://127.0.0.1:8080/static/img/nolist.69ffc326.png',
     'http://127.0.0.1:8080/22.docx'
 ]
 const zip = new JSZip()
 const cache = {}
 const promises = []
 fileList.forEach(item => {
     const promise = getFile(item).then(data => {
         const arr_name = item.split('/') // 下载文件, 并存成ArrayBuffer对象
         const file_name = arr_name[arr_name.length - 1] // 获取文件名
         zip.file(file_name, data, {binary: true}) // 逐个添加文件
         cache[file_name] = data
         console.log(cache)
     })
     promises.push(promise)
 })


 Promise.all(promises).then(() => {
     zip.generateAsync({type: 'blob'}).then(content => {
         console.log(content)
         // 生成二进制流
         saveAs(content, '文件下载.zip') // 利用file-saver保存文件  自定义文件名
     })
 })

2.base64图片下载

var zip = new JSZip();

  zip.file("Hello.txt", "Hello World\n");
  // zip.file("http://project.gzzyad.com/upload/image/20210524/984fe7b977fdb4f97259bfcd9fb0c912.png");

  var img = zip.folder("images");
  var imageData = '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'
  img.file("smile.png", imageData, {base64: true});

  zip.generateAsync({type: "blob"}).then(function (content) {
      // see FileSaver.js
      saveAs(content, "example.zip");
  });

3.前后端分离,导致的图片,文件跨域情况下,批量下载图片,文件的方案

1.前端:

 async downFile(e) {
        let filePath = null
        filePath = e.document_url
        let a = document.createElement("a");
        a.href = filePath;
        a.setAttribute("download", e.document_name);
        a.click();
    },

2.通过nginx服务器做反向代理到前端项目的服务器,并配置图片,文件的反向代理,如下:
nginx.conf文件:

    server {
  		location /upload/ {
            proxy_pass   http://web.gzabc.com/upload/;
        }
}

这样就实现了,a标签在同域正常下载资源

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值