vue图片上传组件使用详解资源-CSDN文库

160 浏览量 2021-01-21 11:38:08 上传评论收藏 80KB PDF 举报

资源推荐

资源详情

资源评论

vue图片上传组件使用详解图片上传组件使用详解

vue图片上传组件，供大家参考，具体内容如下

最近在做项目的时候顺便补充了一下公司项目的公共组件库，刚刚手头事情告一段落，就来做个笔记。

首先来看看最终效果

1.不允许删除

2.允许用户删除（显示删除按钮）

实现的效果就是上图显示内容

接下来说说组件布局那部分直接上代码了

<template>

<div class="uploadImg">

<div class="upload-content">

<div class="upload-title">

<p>{{upTitle}}</p>

<p class="show-num">{{upNum}}/{{uploadNum}}</p>

</div>

<ul class="img-list">

<li class="show-img" v-for="(item, index) in imgList" :key="index">

<img :src="item" alt="">

<kk-icon :class="isDel == true ? '' : 'hide-del'" name="error" color="#FF685D" size="0.4rem" @click.native="delImg(index)"></kk-icon>

</li>

<div class="uploadSec">

<img :src="globalPath+'img/insurance/upload.png'" alt="上传图标">

<input type="file" value="" id="choose" @change='onUpload' multiple>

</div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38713099

粉丝: 4
资源: 905

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip