vue 上传图片到腾讯云对象存储

admin管理员组

文章数量:1666078

vue 上传图片到腾讯云对象存储

• 1、 引入cos-js-sdk-v5
• 2、封装`upload.js`
• 3、封装图片上传组件、调用上传方法
• 4、页面使用组件

需求：上传图片到腾讯云对象存储，返回图片链接地址。

大概流程：

腾讯云对象存储（Cloud Object Storage，COS）是腾讯云提供的一种存储海量文件的分布式存储服务，用户可通过网络随时存储和查看数据。

COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。

COS 通过控制台、API、SDK 和工具等多样化方式简单、快速地接入，实现了海量数据存储和管理。通过 COS 可以进行任意格式文件的上传、下载和管理。

官网文档：https://cloud.tencent/document/product/436

使用腾讯云对象存储准备工作：

首先是需要开通腾讯云对象存储服务，然后，登录对象存储控制台，创建存储视频对应的存储桶。配置规则，桶的读写权限，允许的域名等等的，都要进行设置，具体官方文档都有说明，这里就不赘述了。
准备工作结束后，接下来，就是正式使用了：

1、 引入cos-js-sdk-v5

安装 JavaScript SDK：

npm install cos-js-sdk-v5

安装成功后会有如下信息：

2、封装upload.js

新建文件upload.js，封装上传文件方法，判断上传文件为视频还是图片，视频上传到视频对应的桶，图片上传到图片对应的桶，视频如果大于50M，则分片上传。

步骤：

1）getCOSSecretKey方法调用获取临时秘钥data；

由于固定密钥放在前端会有安全风险，所以使用临时密钥的方式：前端首先请求服务端，服务端使用固定密钥调用 STS 服务申请临时密钥，然后返回临时密钥到前端使用。

2）初始化；

3）判断上传文件的类型；

4）判断文件大小 是否需要分片上传。

// https://cloud.tencent/document/product/436/11459
import COS from 'cos-js-sdk-v5'
import {
    Message } from 'element-ui'
import {
    getCOSSecretKey } from '@/api/common/index'
const config = {
   
  videoBucket: 'xxx',
  imageBucket: 'xxx',
  Region: 'ap-beijing'
}

// 上传到腾讯云cos
export function uploadObject (file, callback) {
   
  /* 1.获取临时秘钥data
   2.初始化
   3.判断上传文件的类型
   4.判断文件大小 是否需要分片上传*/
  const type = file.type.substring(0, 5)
  let fileName = file.name || ""
  const origin_file_name = fileName.split(".").slice(0, fileName.split(".").length - 1).join('.') // 获取文件名称
  // console.log('origin_file_name', origin_file_name)
  // 获取当前时间戳 与文件类型拼接 为cos.putObject里的参数Key
  const upload_file_name = new Date().getTime() + '.' + fileName.split(".")[fileName.split(".").length - 1] // 文件上传名称定义为当前时间戳
  // console.log('upload_file_name', upload_file_name)
  // 获取密钥
  getCOSSecretKey({
    bucket: type === 'video' ? config.videoBucket : config.imageBucket })
    .then(response => {
    // 后台接口返回 密钥相关信息
      const data = response.result
      var credentials = data && data.credentials
      if (!data || !credentials) return console.error('credentials invalid')
      // 初始化
      var cos = new COS({
   
        getAuthorization: (options, callback) => {
   
          callback({
   
            TmpSecretId: credentials.tmpSecretId,
            TmpSecretKey: credentials.tmpSecretKey,
            XCosSecurityToken: credentials.sessionToken,
            StartTime: data.startTime,
            ExpiredTime: data.expiredTime,
            expiration: data.expiration,
            requestId: data.requestId,
          })
        },
      })
      // 获取上传文件大小
      let size = file.size
      let key = '/art/' + upload_file_name
      if (type === 'video') {
   
        // console.log(size / (1024 * 2024))
        if (size / (1024 * 1024) < 50) {
   
          console.log('视频普通上传')
          cos.putObject(
            {
   
              Bucket: config.videoBucket, // 存储桶名称
              Region: config.Region, // 存储桶所在地域，必须字段
              Key: key, // 视频名称
              StorageClass: 'STANDARD',
              Body: file, // 上传文件对象
              onHashProgress: (progressData) => {
   
                // console.log('校验中', JSON.stringify(progressData))
              },
              onProgress: (progressData) => {
   
                const percent = parseInt(progressData.percent * 10000) / 100;
                const speed = parseInt((progressData.speed / 1024 / 1024) * 100) / 100;
                console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
              },
            },
            (err, data) => {
   
              console.log('data', data)
              if (err) {
   
                console.log('err', err)
                Message({
    message: '视频文件上传失败,请重新上传', type: 'error' })
              } else {
   
                let fileUrl = 'https://' + config.videoBucket + '.file.myqcloud' + key
                callback(fileUrl, origin_file_name) // 返回视频链接地址和视频的原始名称
              }
            }
          )
        } else {
   
          console.log('视频分块上传')
          // 上传分块
          cos.sliceUploadFile(
            {
   
              Bucket: config.videoBucket, // 存储桶名称
              Region: config.Region, // 存储桶所在地域，必须字段
              Key: key /* 必须 */,
              Body: file,
              onTaskReady: (taskId) => {
   
                /* 非必须 */
                // console.log(taskId)
              },
              onHashProgress: (progressData) => {
   
                /* 非必须 */
                // console.log(JSON.stringify(progressData))
              },
              onProgress: function (progressData

本文标签： 腾讯上传图片对象vue