组件需求
上传图片到腾讯云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=“#” 使用自定义上传方式，所以取消它的默认上传方法文章来源：https://www.toymoban.com/news/detail-416810.html
添加弹层图片预览功能
<el-dialog title="图片" :visible.sync="showDialog">
<img :src="imgUrl" style="width:100%" alt="">
</el-dialog>
完成代码文章来源地址https://www.toymoban.com/news/detail-416810.html
<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>
<到了这里，关于基于element-ui封装上传图片到腾讯云Cos组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
