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)