vue+element+viewer的图片上传，预览，删除，编辑图片链接文字，限制上传最大数

最新推荐文章于 2023-06-19 09:26:25 发布

look_地中海

最新推荐文章于 2023-06-19 09:26:25 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44897405/article/details/103389767

版权

本文介绍了如何在Vue项目中结合Element UI和Viewer.js实现图片上传、预览、删除和编辑图片链接文字的功能。文章指出在进行预览时需要额外安装Viewer插件，并提供了一段示例代码。

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

先上图：
在这里插入图片描述

本人一菜鸟，改不来element的Upload 上传，于是只好手撸了-。-。，P话不多，上代码：

<template>
  <div class="slideshow">
    <el-button type="primary" @click="dialogVisibleImg = true">上传图片</el-button>
    <!--    图片上传-->
    <el-dialog
        title="编辑标题和链接"
        :visible.sync="dialogVisibleImg"
        width="40%">
      <div>
        <div class="disContent">
          <div v-for="(item, index) in imgs" :key="index" class="img-div"
               @click="switcherCss(item, index)"
               :class="{'pitchCss':active === index}">
            <img :src="item.picture" alt="">
            <div class="disContent-hide">
              <el-tooltip class="item" effect="dark" content="预览" placement="top">
                <span class="iconfont iconfangdajing yuLan">
                    <viewer :images="imgs">
                        <img :src="item.picture" alt="" class="yuLanImg">
                    </viewer>
                </span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <span class="Delete" @click="deleteImg(item,index)"><i class="el-icon-delete"></i></span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <span class="editCss" @click="editTitle(item, index)"><i class="el-icon-edit"></i></span>
              </el-tooltip>
            </div>
          </div