学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject

存储桶列表 ：登录 - 腾讯云

API密钥管理：登录 - 腾讯云

上传图片-创建腾讯云存储桶

存储桶名称：intelligentmanagement-1306913843

地域名称：ap-nanjing

应用标识：AKIDKcpeOzT1kNtXJ40slgYM3Xr6A6xeP8nM

应用密钥：ZzFOOG2tpX1HMEuOkQGyY7Zt8VpHoHi6

创建存储桶

获取存储桶信息和应用信息

使用cos-sdk完成上传

 <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="uploadImage"
  >
   
       // 选择图片上传
    uploadImage (params) {
      console.log(params.file)
      // 完成cos对象的初始化
      const cos = new COS({
        SecretId: 'AKIDKcpeOzT1kNtXJ40slgYM3Xr6A6xeP8nM',
        SecretKey: 'ZzFOOG2tpX1HMEuOkQGyY7Zt8VpHoHi6'
      })
      cos.putObject(
        {
          Bucket: 'intelligentmanagement-1306913843', // 存储桶名称
          Region: 'ap-nanjing', // 地域名称
          Key: params.file.name, // 文件名称
          StorageClass: 'STANDARD', // 固定值
          Body: params.file // 文件对象
        },
        (err, data) => {
          if (data.statusCode === 200 && data.Location) {
            // 拿到了腾讯会返回的地址
            // 通过input自定义事件将地址传出去
            this.$emit('input', 'http://' + data.Location) // 将地址返回了
          } else {
            this.$message.error(err.message) // 上传失败提示消息
          }
        }
      )
    }