vue中OSS文件下载

1.普通文件获取链接

图片,其他文件下载excel,txt,word等
这个是前端直接从oss中获取临时链接

获取链接:

可以查看oss的官方网址：help.aliyun.com/document_de…

• 先安装ali-oss，
  npm install ali-oss --save
  
• 也可以在index.html里面直接引入（可以是线上资源也可以是本地资源）

<!-- 引入在线资源 -->
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>  

下面这些字段我都是从后台获取的；

 let OSS = require('ali-oss');
let fs = require('fs');
let client = new OSS({
  // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'yourRegion',
  // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  // 从STS服务获取的安全令牌（SecurityToken）。
  stsToken: 'yoursecurityToken',
  // 填写Bucket名称。
  bucket: 'examplebucket',
});
let filename = `自己的文件名`    
let url = client.signatureUrl(objectName, { 
response: { 
'content-disposition':`attachment; filename="${encodeURIComponent(filename)}`
}
});           
    this.download(url,filename);  //统一调用下载的方法

2.音视频获取链接

//url为从后台获取的临时文件链接，可预览可下载
//filename为自定义的文件名称
//先把文件变成blob文件链接,然后才能下载
await只能放在有async关键字的函数里

async downloadClick(url,filename) { 
      let _this = this;
      const res=await fetch(url); 
      console.log(res)      
      const blob=await res.blob()
      const urlBlob = window.URL.createObjectURL(blob) // 创建 object url，没有这一步下载的 blob 文件会出现 Failed 情况
      console.log('urlBlob: ', urlBlob)
      let downloadUrl = urlBlob
      setTimeout(() => {
        _this.download(urlBlob,filename); //统一调用下载的方法
      }, 200)
    },

3.下载

用a标签的方法进行下载

 download(url, filename) {  
  let _this = this;    
  const element = document.createElement('a')
  element.setAttribute('href', url)
  element.setAttribute('download', filename)
  element.style.display = 'none'
  element.click();
  console.log("下载成功");      
 },