vue3 ElementPlus el-upload 图片列表缩略图模式添加查看大图删除等自定义按钮

toocool404

已于 2023-02-25 13:49:31 修改

阅读量4.3k

点赞数 1

文章标签： vue.js 前端 javascript elementui

于 2023-02-25 13:47:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45941959/article/details/129214859

版权

该文章展示了如何在Vue.js应用中使用element-plus组件库的el-upload组件来处理图片上传，包括限制上传数量、自定义缩略图显示、添加查看大图和删除图片的功能。关键代码在于对el-upload列表样式进行调整，以及添加额外的控制按钮来隐藏/显示图片。

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

列表缩略图自定义按钮如图：

在这里插入图片描述

在这里插入图片描述
代码：
html部分

<template>
  <div class="container">
    <!-- :show-file-list="false" -->
    <el-upload v-model:file-list="state.list" class="picture-card" action="" list-type="picture" 
      :http-request="handleUpload" :on-change="handleChange" limit="3">
      <el-button type="primary">点击上传图片</el-button>
      <template #tip>
        <div class="el-upload__tip">请上传图片，且确保图片内容清晰可见</div>
        <!-- 关键代码在这里，这段代码是将list-type="picture"的时候显示出来的缩略图的代码复制出来修改的 这里无法覆盖原来的picture，所有    在ul里面加了一个show的类名，然后在样式里面将原来的隐藏了-->
        <ul class="el-upload-list el-upload-list--picture show">
          <li v-for="(item, index) in state.list" class="el-upload-list__item is-success" tabindex="0">
            <!--scanBigImg：查看大图的方法  -->
            <div style="width:100%;display: flex;justify-content: space-between;">
              <div>
                <img style="cursor: pointer;" @click="scanBigImg(item)" class="el-upload-list__item-thumbnail"
                  :src="item.url">
              </div>
              <div style="margin-right:30px;margin-top:20px;">
                隐藏 <el-switch @change="handleSwitch(item, index)" v-model="item.isHide" />
                <el-icon style="font-size: 18px;margin-left:20px;padding-top:10px" @click="handleDelete(index)">
                  <Delete />
                </el-icon>
              </div>
            </div>
            <label class="el-upload-list__item-status-label">
              <el-icon>
                <Check />
              </el-icon>
            </label>
          </li>
        </ul>
      </template>
    </el-upload>
    <el-button type="primary" @click="submit">确定保存</el-button>
  </div>
  <!-- 显示大图的dialog  -->
  <el-dialog v-model="dialogVisible" style="max-height: 1000px; width: 100%; text-align: center;">
    <img style="width: auto; max-width: 100%; height: auto; max-height: 500px; display: inline-block;margin: auto;"
      :src="dialogImageUrl" alt="">
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { Delete, Check } from '@element-plus/icons-vue'

const dialogImageUrl = ref('')//大图的url
const dialogVisible = ref(false);
//查看大图
const scanBigImg = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
}
//删除
const handleDelete = (index: number) => {
  state.dataList.splice(index, 1)
  state.list.splice(index, 1)
}



</script>

css：

<style scoped>
:deep(.el-upload-list.el-upload-list--picture) {
  display: none !important; //这里设置原有的缩略图视图隐藏
}

.el-upload-list.el-upload-list--picture.show {
  display: block !important; //展示自定义
}
</style>