前端cos上传文件

后端有一个接口返回密钥，可以直接xhr调用，或者统一代码风格将其返回数据传入简化代码，看起来比较简洁易懂

:http-request elment的自定义上传，会覆盖:on-success

<el-upload action="" :show-file-list="false" :http-request="getBucket">

import { suijione } from './random.js'
var COS = require('cos-js-sdk-v5')
export function initCOS(file, bucket_name) {
//获取一个时间戳加随机字符组成文件名字
  let name = file.name.split('.')[1]
  let random = suijione(true, true, false, 6)
  let uploadFileName = Date.parse(new Date())
  console.log(`pack/${uploadFileName}${random}.${name}`)
  //初始化cos实例，这里可以简化
  const cos = new COS({
    getAuthorization: function (options, callback) {
      var url =
        process.env.VUE_APP_BASE_URL + '/file/getKey?bucket=' + bucket_name // url替换成您自己的后端服务
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url, true)
      xhr.onload = function (e) {
        try {
          var data = JSON.parse(e.target.responseText)
          var credentials = data.data.credentials
          console.log(data, '---------', credentials)
        } catch (e) {
          console.log(e)
        }
        if (!data) {
          return console.error(
            'credentials invalid:\n' + JSON.stringify(data, null, 2)
          )
        }
        callback({
          TmpSecretId: credentials.tmpSecretId,
          TmpSecretKey: credentials.tmpSecretKey,
          SecurityToken: credentials.sessionToken,
          StartTime: data.data.startTime, // 时间戳，单位秒，如：1580000000，建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
          ExpiredTime: data.data.expiredTime, // 时间戳，单位秒，如：1580000000
          ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
        })
      }
      xhr.send()
    },
  })
  //简单上传对象
  cos.putObject(
    {
      Bucket: bucket_name /* 填入您自己的存储桶，必须字段 */,
      Region: 'ap-hongkong' /* 存储桶所在地域，例如ap-beijing，必须字段 */,
      Key: `pack/${uploadFileName}${random}.${name}` /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
      StorageClass: 'STANDARD',
      Body: file, // 上传文件对象
      onProgress: function (progressData) {
        console.log(JSON.stringify(progressData))
      },
    },
    function (err, data) {
      console.log(err || data)
    }
  )
}

简化实例对象

 //初始化cos实例，这里可以简化
  const cos = new COS({
    getAuthorization: function (options, callback) {
        callback({//获取后端返回的数据对其赋值即可
          TmpSecretId: credentials.tmpSecretId,
          TmpSecretKey: credentials.tmpSecretKey,
          SecurityToken: credentials.sessionToken,
          StartTime: data.data.startTime, // 时间戳，单位秒，如：1580000000，建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
          ExpiredTime: data.data.expiredTime, // 时间戳，单位秒，如：1580000000
          ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
        })
      }
    },
  })