基于element-ui封装上传图片到腾讯云Cos组件_vue vite cos-nodejs-sdk-v5 element plus el-upload-优快云博客

本文介绍如何基于Element-UI封装一个上传图片到腾讯云Cos的Vue组件，实现图片预览、删除及上传功能。组件要求包括：上传图片到腾讯云服务器、显示图片、删除图片和回调成功函数。利用el-upload组件并自定义上传方式，通过一个插件协助处理上传任务。当数据库返回图片地址时，组件能正确显示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件需求

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

可以显示传入的图片地址
可以删除传入的图片地址
可以上传图片到云服务器
上传到腾讯云之后，可以返回图片地址，显示
上传成功之后，可以回调成功函数

需要使用借助一个插件，帮助我们上传图片资源到腾讯云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><