vue+oss 纯前端文件上传

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

 注：以上是配置OSS

文件上传:

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()
}

注：关闭上传窗口时 可以调用 （如果不暂停 关闭窗口后 会后台继续上传）

 

文件下载：

async function download(fileUrl, filename) {
  return await client.signatureUrl(fileUrl, {
    response: {
      'content-disposition': `attachment;filename=${encodeURIComponent(filename)}`
    }
  })
}

注释：fileurl：需要下载的文件连接   filename：下载的文件名字               （其中用到转码）

标签：vue,oss,filename,client,ObjName,fileUrl,上传,OSS
来源： https://www.cnblogs.com/dells/p/14593267.html