vue+oss前端直传oss 纯前端实现文件上传、下载、暂停上传(含demo)

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：下载的文件名字               （其中用到转码）

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

demo请看：https://github.com/wangyining-1/oss-upload-module