vue下载阿里OSS上的图片与视频，纯前端实现，以及纯JS下载图片案例

1. 简介与日常使用

参考这篇文章即可：阿里OSS上传图片与视频

2. Vue下载阿里OSS上的图片与视频

• 为了方便大家的使用直接封装成公用方法了，记得给个三连啊
• 方法定义：

    downFilePublic(newArr) {
      let client = new OSS({
        region: "oss-cn-beijing",
        accessKeyId: "xxxxxx",
        accessKeySecret: "xxxx",
        bucket: "xxxx",
      });
      newArr.forEach((path) => {
      	// 这行代码拿的是原文件的后缀名，后面我进行了改动
        // const filename = path.substring(path.lastIndexOf("/") + 1);
        // 这行代码更改为自定义的名字了
        const filename = path.fileName + path.link.match(/.[^.]+$/)[0];
        const response = {
          "content-disposition": `attachment; filename=${encodeURIComponent(
            filename
          )}`,
        };
        // 阿里云的API 直接调用即可
        let url = client.signatureUrl(path.link, { response });
        let iframe = document.createElement("iframe");
        iframe.style.display = "none";
        document.body.appendChild(iframe);
        iframe.src = url;
      });
    },

• 需要注意的是，这里的 iframe 不能直接移除，因为下载任务可能还没完成
• 可以等待完成再移除

3. 调用（单个与批量下载均可使用）

   // 批量下载 图片与视频 通用
    batchDownFile() {
      if (this.selectionArr.length == 0) {
        this.$message.warning("请先选择要下载的数据");
        return;
      }
      // 这里想要什么参数 往里面塞就是了
      let newArr = this.selectionArr.map((item) => {
        return {
          link: item.materialLink,  // 路径
          fileName: item.materialName
        }
      });
      this.downFilePublic(newArr);
    },
    // 单个下载
    downFile(row) {
      let arr = [{link:row.materialLink, fileName: row.materialName}];
      this.downFilePublic(arr);
    },

• 注意，这里的 link 相对路径就可以，不用绝对路径
• 比如 www.http//:oss.xxx/mater/demo.png，只要这个：mater/demo.png，当然也有可能就是 demo.png

4. 纯JS下载图片案例，Vue里面也可以用

    downFn(url) {
      let Img = new Image(),
        dataURL = "";
      let fileName = 'xxxxx.png';
      Img.src = url;
      // 处理跨域
      Img.setAttribute("crossOrigin", "Anonymous");
      // 监听图片加载好
      Img.onload = function () {
        let canvas = document.createElement("canvas"),
          width = Img.width,
          height = Img.height;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(Img, 0, 0, width, height);
        dataURL = canvas.toDataURL("image/png");
        let eleLink = document.createElement("a");
        eleLink.download = fileName;
        eleLink.style.display = "none";
        eleLink.href = dataURL;
        document.body.appendChild(eleLink);
        eleLink.click();
        document.body.removeChild(eleLink);
      };
    },

• 调用传入图片的地址就行，这里必须要整个地址，比如：

downFn('www.http//:oss.xxx/mater/demo.png')

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(主页有Q)