基于ElementUI上传腾讯云Cos，上传组件进行自定义封装

1.效果图

image.png

image.png

2.使用方式

3.首先编写sy-upload.vue

4.编写安装syUpload.js

import SyUpload from "@/components/upload/sy-upload"

export default {
  install (Vue) {
    Vue.component('SyUpload', SyUpload)
  }
}

5.在main.js中全局注册

import SyUpload from "@/util/syUpload"
Vue.use(SyUpload)

6.参数说明

props: {
  // 宽
  width: {
    type: Number,
    default: 150,
  },
  // 高
  height: {
    type: Number,
    default: 150,
  },
  // 存储桶  Private Protected Public 
  bucket: {
    type: String,
    default: 'Private',
  },
  // 标题
  title: {
    type: String,
    default: '请选择图片',
  },
  // 上传存储桶位置
  folderName: {
    type: String,
    default: '/default-folder',
  },
  // 是否显示移除按钮
  showRemove: {
    type: Boolean,
    default: true,
  },
  // 是否显示预览
  showPreview: {
    type: Boolean,
    default: true,
  },
},