vue +element-ui 实现的oss web直传文件功能

简述: 后台系统基本的上传功能,oss 的web直传, 因oss 获取音视频时长需要收费,所以采用的前端本地获取上传音视频资源的时长,并配了上传成功音视频预览功能, oss 直传官网文档

1:oss上传流程,需要拿到后端返回的oss 签名信息

// 获取后端返回的签名信息
export function client(data) {
  //data后端提供数据
  return new OSS({
    region: data.region,
    accessKeyId: data.Credentials.AccessKeyId,
    accessKeySecret: data.Credentials.AccessKeySecret,
    stsToken: data.Credentials.SecurityToken,
    bucket: data.bucket
  })
}

2:主要上传组件ossUpload代码,用element 的自定义上传方法http-request ,

3:防止不同文件相同名字上传oss 覆盖, 对文件名处理拼接(看公司需求要求)

// 随机字符串
export function randomString(len) {
  len = len || 32
  const $chars =
    'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  const maxPos = $chars.length
  let pwd = ''
  for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return pwd
}

:有任何问题都可留言 ps: 此组件之前全是vue2 写法, 现用在vue3项目中,所以中有emits, 并没有全部改成3.0的写法,只是兼容了3,0 ,各种可按情况更改