vue+oss 纯前端文件上传

let OSS = require('ali-oss');
let client = new OSS({ region: '配置自己的', //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。 accessKeyId: '配置自己的', accessKeySecret: '配置自己的',
  bucket: '配置自己的' })

 注：以上是配置OSS

 

文件上传api接口:

const put = async (ObjName, fileUrl, progressFun) => {
  try {
    let result = await client.multipartUpload(`${ObjName}`, fileUrl, progressFun) return result 
} catch (e) { console.log(e) } 
}

注：ObjName 可以是自定义文件名例如（dells.txt）也可以  `${userId}/${nowDay}/${ObjName}`  例如（/userId/nowDay/dells.txt）这样做文件目录  上传成功链接是这样的http://oss官网/userId/nowDay/dells.txt

　　fileUrl 是文件file对象 或者 blob数据以及OSS buffer

　　progressFun 是获取上传文件进度（可要可不要）

 

暂停上传:

cancelApi() {
  return client.cancel()
}
注：关闭上传窗口时 可以调用 （如果不暂停 关闭窗口后 会后台继续上传）

 

文件下载api接口：

async function download(fileUrl, filename) {
  return await client.signatureUrl(fileUrl, {
    response: {
      'content-disposition': `attachment;filename=${encodeURIComponent(filename)}`
    }
  })
}
注释：fileurl：需要下载的文件连接   filename：下载的文件名字               （其中用到转码）

 

调用传参后 会返回一个下载连接 使用以下方法打开下载连接；

    openUrl(url, fileName) {
      let a = document.createElement("a"); //添加a标签元素
      a.setAttribute("href", url);　　//给a标签增href属性
      a.setAttribute("download", fileName); //给a标签新增download属性 下载文件名
      a.setAttribute("target", "_blank"); //新增标签页
      a.click(); 
      a.remove();
    },

这是我写的 利用创建a标签再出发下载的方法 可以参考一下