COS对象存储前端WEB使用

对象存储（Cloud Object Storage，COS）是腾讯云提供的一种存储海量文件的分布式存储服务，用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。

COS 通过控制台、API、SDK 和工具等多样化方式简单、快速地接入，实现了海量数据存储和管理。通过 COS 可以进行任意格式文件的上传、下载和管理。腾讯云提供了直观的 Web 管理界面，同时遍布全国范围的 CDN 节点可以对文件下载进行加速。

COS JavaScript SDK

实际代码：

/**
 * @Version
 * @Author ZhenYuTsai
 * @Descripttion
 * @Date 2021-09-10 14:24:48
 * @LastEditors ZhenYuTsai
 * @依赖 npm install cos-js-sdk-v5
 */
const COS = require('cos-js-sdk-v5')
import enums from '@/api/enums.js'
let cos = null

/**
 * @author ZhenYuTsai
 * @description 初始化COS
 * @return {Object} Promise
 * @param {Object} params 获取初始化信息后台入参
 * @lastEditors ZhenYuTsai
 */
const initCos = (params) => {
  return new Promise((resolve, reject) => {
    enums.queryUploadConfig(params).then((res) => {
      if(res.code===0){
        cos = new COS({
          Region:res.content.region,
          Bucket:res.content.bucket,
          SecretId: res.content.tmpSecretId,
          SecretKey: res.content.tmpSecretKey,
          XCosSecurityToken: res.content.sessionToken,
        })
        resolve(res.content)
      } else {
        reject(res)
      }
    }).catch((err) => {
      reject(err)
    })
  })

}

/**
 * @author ZhenYuTsai
 * @description 上传文件到COS
 * @return {Object} Promise 文件上传结果
 * @lastEditors ZhenYuTsai
 * @param {Object} params 获取初始化信息后台入参
 * @param {Array} files 文件对象列表
 * @param {Function} callback 上传中中的回调，返回上传进度
 */
export function uploadFile(params,files,callback) {
  return new Promise((resolve, reject) => {
    initCos(params).then((res) => {
      let uploadFileList = []
      if(files.constructor === Array){
        uploadFileList = files.map(item=>{
          const path = item.webkitRelativePath || item.name
          return {
            Bucket:res.bucket,
            Region:res.region,
            Key: res.path + Math.random().toString(36).substring(2)+'-' + path,
            Body: item
          }
        })
      } else {
        console.error('上传文件格式不正确，请Array格式！')
        return
      }
      let resultList = []
      cos.uploadFiles({
          files: uploadFileList,
          SliceSize: 1024 * 1024 * 10,
          onProgress: function (info) {
            var percent = parseInt(info.percent * 10000) / 100
            var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100
            callback && callback(percent, speed)
            // console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;')
            if(percent>=100){
              resolve(resultList)
            }
          },
          onFileFinish: function (err, data, options) {
            // console.log(options.Key + '-上传' + (err ? '失败' : '完成'))
            resultList.push(options)
          }
        },
        (err, data) => {
          if (err) {
            console.log('上传失败', err)
            reject({
              err,
              data
            })
          }
        }
      )
    })
  })
}

/**
 * @author ZhenYuTsai
 * @description 下载COS存储的文件
 * @return {Object} Promise 文件下载地址
 * @lastEditors ZhenYuTsai
 * @param {Object} params 获取初始化信息后台入参
 * @param {String} Key 文件COS的存储路径
 * @param {Boolean} auto 是否自动下载,默认是
 */
export function downloadFile(params,Key,auto = true) {
  return new Promise((resolve, reject) => {
    initCos(params).then((res) => {
      cos.getObjectUrl({
        Bucket:res.bucket,
        Region:res.region,
        Protocol: 'https:',
        Key
      }, function (err, data) {
        if (err) {
          reject({
            err,
            data
          })
          return
        }
        // 补充强制下载的参数
        const url = data.Url + (data.Url.indexOf('?') > -1 ? '&' : '?') + 'response-content-disposition=attachment'
        if(auto){
          const arr = Key.split('/')
          let DownloadLink = document.createElement('a')
          DownloadLink.style = 'display: none'
          DownloadLink.download = arr[arr.length-1]
          DownloadLink.href = url
          document.body.appendChild(DownloadLink)
          DownloadLink.click()
          document.body.removeChild(DownloadLink)
        }
        resolve(url)
      })
    })
  })
}

/**
 * @author ZhenYuTsai
 * @description 获取文件预览地址
 * @return {Object} Promise 文件预览地址
 * @lastEditors ZhenYuTsai
 * @param {Object} params 获取初始化信息后台入参
 * @param {String} Key 文件COS的存储路径
 * @param {Boolean} Sign 是否生成带有秘钥的预览路径，默认有
 */
export function getObjectUrl(params,Key,Sign=true) {
  return new Promise((resolve, reject) => {
    initCos(params).then((res) => {
      const url = cos.getObjectUrl({
        Bucket:res.bucket,
        Region:res.region,
        Key,
        Sign,
        Protocol: 'https:'
      })
      resolve(url)
    }).catch((err) => {
      reject(err)
    })
  })
}

// @/api/enums.js

import http from '@/utils/http'
let URL = ''
if ('true' !== process.env.VUE_APP_USE_MOCK) {
  URL = process.env.VUE_APP_OPER
}
export default {
  // 获取上传文件初始化配置
  queryUploadConfig(params) {
    return http.get(URL + '/operation-oms/restful/insurance/cos/temp/secret', params)
  },
}