@df8080/vue2-ui/utils/cos.js

🎨 一个基于 Vue 2 的 UI 组件库，目前主要面向微信小程序开发场景，也适用于其他移动端项目。

// #ifndef H5
import WeChatCOS from 'cos-wx-sdk-v5'
// #endif

/** 获取文件路径 */
export const getFilePath = (filePath) => filePath.replace(/^.+\/(.+)$/, '$1')

/**
 * 针对腾讯云COS的封装工具类
 *
 * 示例
 * ```ts
 * // 初始化
 * const COS = new COS({
 *   getConfig: () => {
 *     // 调用接口获取相关配置信息
 *     return Promise.resolve({
 *       region: 'ap-guangzhou',
 *       bucket: 'instance-xxxx',
 *       prefix: 'a1',
 *     });
 *   },
 *   getAuthorization: () => {
 *     // 调用接口获取 token 相关鉴权信息
 *     return Promise.resolve({
 *       startTime: 1633764822, // 该参数会影响，getObjectUrl Ex
 *       expiredTime: 1633766622,
 *       credentials: {
 *         tmpSecretId: 'xxxxx',
 *         tmpSecretKey: 'xxxxx',
 *         sessionToken: 'xxxx',
 *         ScopeLimit: true,
 *       },
 *     });
 *   },
 * })
 *
 * // 上传文件，filePath 在小程序上是选择完的tempFilePath
 * const res = await COS.uploadFile(filePath)
 *
 * // 获取对象访问 URL
 * COS.getObjectUrl({
 *   Key: res.Key
 * })
 * ```
 */
export class COS {
  config
  cos
  cosConfig
  cosAuthorization

  constructor(config) {
    this.config = config

    if (typeof WeChatCOS === 'undefined') {
      console.error(new Error('此工具类依赖"cos-wx-sdk-v5"，请先安装该依赖"'))
    }

    this.cos = new WeChatCOS({
      SimpleUploadMethod: 'putObject',
      getAuthorization: async (options, callback) => {
        const auth = await this.getAuthorization(options)
        callback({
          TmpSecretId: auth.credentials.tmpSecretId,
          TmpSecretKey: auth.credentials.tmpSecretKey,
          SecurityToken: auth.credentials.sessionToken,
          StartTime: auth.startTime,
          ExpiredTime: auth.expiredTime,
        })
      },
      ...config.cosOptions,
    })
  }

  async getConfig() {
    if (this.cosConfig) return this.cosConfig
    const config = await this.config.getConfig()
    this.cosConfig = config
    return config
  }

  async getAuthorization(options) {
    const authorization = await this.config.getAuthorization(options)
    this.cosAuthorization = authorization
    return authorization
  }

  /**
   * 上传对象
   * @link https://cloud.tencent.com/document/product/436/64991
   * @param key - 对象键
   * @param filePath - 文件路径
   * @param params - 上传参数
   */
  async uploadFile(filePath, params) {
    const cosConfig = await this.getConfig()
    const Key = `${cosConfig.prefix}/${params?.Key ?? getFilePath(filePath)}`
    return new Promise((resolve, reject) => {
      this.cos.uploadFile(
        {
          Bucket: cosConfig.bucket,
          Region: cosConfig.region,
          FilePath: filePath,
          ...params,
          Key,
        },
        (err, data) => {
          if (err) {
            console.error(err)
            reject(err)
            return
          }
          data.Key = Key
          resolve(data)
        },
      )
    })
  }

  /**
   * 获取对象访问 URL
   * @link https://cloud.tencent.com/document/product/436/57422
   */
  async getObjectUrl(params) {
    const cosConfig = await this.getConfig()
    return new Promise((resolve, reject) => {
      this.cos.getObjectUrl(
        {
          Bucket: cosConfig.bucket,
          Region: cosConfig.region,
          ...params,
        },
        (err, data) => {
          if (err) {
            reject(err)
            return
          }
          resolve(data)
        },
      )
    })
  }
}

/**
 * @description 腾讯云cos缩略图
 * @param url 拼接的数据
 * @param thumbnail 缩略图参数[参考地址](https://cloud.tencent.com/document/product/436/44880)
 * @return 拼接后的缩略图
 */
export const cosThumbnail = (url, thumbnail = '200x') => {
  if (/\?/.test(url)) {
    return url
  }

  return `${url}?imageMogr2/thumbnail/${thumbnail}`
}

/** cos快速缩略图默认参数 */
export const COS_IMAGE_VIEW2_PARAMS = '/q/80/ignore-error/1'

/**
 * @description cos快速缩略模板
 * @param url 拼接的数据
 * @param query 缩略图参数[参考地址](https://cloud.tencent.com/document/product/1246/109210)
 * @return 拼接后的缩略图
 */
export const cosImageView2 = (url, query = `w/200${COS_IMAGE_VIEW2_PARAMS}`) => {
  if (/\?/.test(url)) {
    return url
  }

  return `${url}?imageView2/2/${query}`
}

export default COS