阿里云图片批量上传

先npm需要使用的插件

npm i jszip
npm i file-saver

导入

import { saveAs } from 'file-saver';
import JSZip from 'jszip'

实际操作

val是区分点击的是批量还是全部


//selPictureUrl是一个这样的数组

selPictureUrl:["https://jhy-oss.oss-cn-shenzhen.aliyuncs.com/jhws/company-1/img/xxxxx.png","https://jhy-oss.oss-cn-shenzhen.aliyuncs.com/jhws/company-1/img/64dxxx20b6cf6dxxxxx.jpeg","https://jhy-oss.oss-cn-shenzhen.aliyuncs.com/jhws/company-1/img/6xxxxxxfa570xxxx39c.jpg"]

 //批量下载和全部下载按钮区分
    handleAddNew (i) {
      this.downloadImg(i)
    },
    // 批量下载图片
    async downloadImg (val) {
      var arr = []
      var imgName = []
      if (val === '1') {
        if (!this.selPictureUrl.length) this.$message.warning('请至少选择一张图片')
        arr = this.selPictureUrl
        this.data.filter(item => {
          this.selPictureUrl.forEach(v => {
            if (v === item.url) {
              imgName.push(item.nick.replace(/(\.png|\.jpeg|\.jpg)$/i, ''))
            }
          })
        })
      } else if (val === '2') {
        const res = await listPicture({
          pageNum: 1,
          pageSize: 1000000000
        })
        arr = res.data.map(item => item.url)
        imgName = res.data.map(item => item.nick.replace(/(\.png|\.jpeg|\.jpg)$/i, ''))
      }
      var zip = new JSZip();
      // 创建images文件夹
      var imgFolder = zip.folder("images");
      let flag = 0 //  判断加载了几张图片的标识


      for (let i = 0; i < arr.length; i++) {                  //遍历数组arr
        this.getBase64(arr[i]).then(base64 => {  //调用getBase64()方法,传入图片网络地址得到base64数据
          base64 = base64.split('base64,')[1]
          imgFolder.file(imgName[i] + '.png', base64, { base64: true })//自定义图片名字,存进images文件夹里面
          if (flag === arr.length - 1) {
            zip.generateAsync({ type: "blob" }).then((blob) => {
              if (val === '1') {
                saveAs(blob, "批量图片下载.zip")//自定义文件压缩包名字
              } else if (val === '2') {
                saveAs(blob, "全部图片下载.zip")//自定义文件压缩包名字
              }
            })
          }
          flag++
        });
      }
    },
    //传入图片地址,返回base64格式数据
    getBase64 (img) {
      var image = new Image();
      image.crossOrigin = '*';//解决图片跨域问题
      image.src = img;
      return new Promise((resolve, reject) => {
        image.onload = () => {
          resolve(this.getBase64Image(image));
        }
      })
    },

    //创建画布,将图片渲染到画布上,再将画布转为base64格式数据返回出来
    getBase64Image (img, width, height) {
      var canvas = document.createElement("canvas");
      canvas.width = width ? width : img.width;
      canvas.height = height ? height : img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      var dataURL = canvas.toDataURL();
      return dataURL;
    },

 

如果遇到跨域问题,如下图这种都是阿里云没有配置Access-Control-Allow-Origin为*

直接跟领导说阿里云配置安全策略将上面的这个改为*即可

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值