element-ui(el-upload) 使用cos-js-sdk-v5腾讯云实现cos文件上传

官方地址：

https://cloud.tencent.com/document/product/436/11459

1. 封装 upload.js

npm i cos-js-sdk-v5 --save

import COS from 'cos-js-sdk-v5'
import { getTmp_secret_key } from '@/api/system/sysuser'
import {
    Message
} from 'element-ui'
export default function upload(file,callback) {
    let fileUrl = ''
  getTmp_secret_key().then(response => { // 后台接口返回 密钥相关信息
    const data = response.data
    let uploadFileName = Date.parse(new Date())
    var cos = new COS({
        getAuthorization: function(options, callback) {
          callback({
            TmpSecretId: data.tmp_secret_id,
            TmpSecretKey: data.tmp_secret_key,
            XCosSecurityToken: data.session_token,
            StartTime: data.start_time,
            ExpiredTime: data.expired_time,
            expiration: data.expiration,
            requestId: data.request_id
          })
        }
      })
      cos.putObject(
        {
          Bucket: data.bucket_name, // 存储桶名称
          Region: 'ap-chengdu', // 地区
          Key: '/tweet/img/' + uploadFileName + '.png', // 图片名称
          StorageClass: 'STANDARD',
          Body: file, // 上传文件对象
          onHashProgress: function (progressData) {
            console.log ('校验中', JSON.stringify (progressData));
          },
           onProgress: function (progressData) {
            console.log ('上传中', JSON.stringify (progressData));
           },
        },
       function (err, data) {
         console.log('999',err,data,data.Location)
        if (err) {
            Message({message:'文件上传失败,请重新上传',type: 'error',})
        } else {
            let fileUrl = 'http://' + data.Location
            callback(fileUrl)
        }
        }
      )
  })
}

2. 页面调用

（1）引入js

import upload from '@/utils/upload' // 引入js

（2）html

<template>
    <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :on-progress="getTmp_secret_keys"
    >
      <img v-if="value" :src="value" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
 </template>

（3）方法调用

  methods: {
    beforeAvatarUpload (file) {
      console.log(file)
      this.uploadFile = file
    },
    // 上传文件
    getTmp_secret_keys() {
      let files = upload(this.uploadFile,res => {
        console.log(res,'ddddd')

      })
    },
  }

---

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！