基于element-ui封装上传图片到腾讯云Cos组件

组件需求

上传图片到腾讯云Cos服务器

1. 可以显示传入的图片地址
2. 可以删除传入的图片地址
3. 可以上传图片到云服务器
4. 上传到腾讯云之后，可以返回图片地址，显示
5. 上传成功之后，可以回调成功函数
   
   需要使用借助一个插件，帮助我们上传图片资源到腾讯云Cos

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

使用element的el-upload组件上传本地图片

<template>
 <el-upload list-type="picture-card" :limit="1" action="#">
  </el-upload>
</template>

limt 限制图片上传的数量
action=“#” 使用自定义上传方式，所以取消它的默认上传方法

添加弹层图片预览功能

 <el-dialog title="图片" :visible.sync="showDialog">
      <img :src="imgUrl" style="width:100%" alt="">
   </el-dialog>

完成代码

<template>
  <div>
    <el-upload
      :on-preview="preview"
      :on-remove="handleRemove"
      :on-change="changeFile"
      :before-upload="beforeUpload"
      :file-list="fileList"
      list-type="picture-card"
      action="#"
      :limit="1"
      :class="{ disabled: fileComputed }"
      :http-request="upload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress
      v-if="showPercent"
      style="width: 180px"
      :percentage="percent"
    />
    <el-dialog title="图片" :visible.sync="showDialog">
      <img :src="imgUrl" style="width: 100%" alt="" />
    </el-dialog>
  </div>
</template><