vue图片上传预览功能

最新推荐文章于 2024-09-13 23:40:08 发布

luwenze

最新推荐文章于 2024-09-13 23:40:08 发布

阅读量1.7w

点赞数

文章标签： vue 图片预览

本文链接：https://blog.csdn.net/luwenze/article/details/84766054

版权

本文介绍了如何在Vue项目中实现图片上传并预览的功能，包括html结构的设计和css样式的应用，帮助开发者理解Vue中图片预览的实现过程。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

html结构

<ul class="gallery-window-map" style="flex-wrap:wrap;">
	<!--点击上传按钮-->
    <li class="house-pic-item" v-if="!(!item.isNew&&editBtnType[index])" @click="houseUpload(index)">
        <div class="pic-box">
            <span class="iconfont icon-zengjia"></span>
            <h5 class="btn-tit">点击上传</h5>
        </div>
    </li>
    <!--展示区域-->
    <viewer :images="item.imgUrl">
        <li class="house-pic-item" v-for="(picItem, picIndex) in item.imgUrl" :key="p