ant-design-vue的Upload 上传怎么用腾讯云的cos

安装依赖npm i cos-js-sdk-v5 --save

封装工具类

const COS = require('cos-js-sdk-v5')
var cos = new COS({
  SecretId: '', // 用户id
  SecretKey: '' // 用户密钥
})

const httpUploadRequest = (res) => {
  return new Promise((resolve, reject) => {
    const paths = res.file.name.split('.')
    const suffix = '.' + paths[paths.length - 1]
    const filename = guid() + suffix
    cos.putObject(
      {
        Bucket: 'ssb-1307150208', // 必须:存储桶
        Region: 'ap-shanghai', // 存储桶所在地域，必须字段,
        Key: '/' + filename, // 必须 :目录/文件名
        Body: res.file, // 上传文件对象
        onProgress: function (progressData) {
          // 进度条
          console.log(JSON.stringify(progressData))
        }
      },
      (err, data) => {
        console.log(data)
        if (data.statusCode == 200) {
          resolve(data)
        } else {
          reject(err)
        }
      }
    )
  })
}

function guid() {
  function S4() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() +        S4()
}

export default httpUploadRequest

<template>
 <a-upload
   name="avatar"
   list-type="picture-card"
   class="avatar-uploader"
   action="#"
   :show-upload-list="false"
   :before-upload="beforeUpload"
   :customRequest="httpUpload"
 >
   <img v-if="imageUrl" :src="imageUrl" alt="avatar" class="image-size" />
   <div v-else>
      <a-icon :type="loading ? 'loading' : 'plus'" />
      <div class="ant-upload-text">上传二维码</div>
   </div>
 </a-upload>
</template>

<script>
import httpUploadRequest from '@/utils/cos-upload'
export default {
  data() {
    return {
      loading: false,
      imageUrl: ''
    }
  },
  methods: {
    httpUpload(res) {
      this.loading = true
      httpUploadRequest(res)
        .then((result) => {
          this.imageUrl = `https://${result.Location}`
          this.loading = false
        })
        .catch(() => {
          this.$message.error('上传失败，请稍后再试。')
          this.loading = false
        })
    },

    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg或png格式的图片。')
      }
      return isJpgOrPng
    }
  }
}
</script>