使用el-upload上传图片，改造预览功能

最新推荐文章于 2025-05-19 11:35:48 发布

卡洛背心

最新推荐文章于 2025-05-19 11:35:48 发布

阅读量6.7k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： 1024程序员节 javascript

本文链接：https://blog.csdn.net/weixin_42321819/article/details/120937629

Vue 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何在Element UI的el-upload组件中扩展图片预览功能，支持放大、缩小、旋转及切换图片，通过自定义组件和方法实现了更丰富的用户体验。

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

今天给大家介绍一下在使用Element的el-upload上传图片的过程中，改造原有的预览功能。

官网预览效果图：

在这里插入图片描述

改造之后的预览效果：

在这里插入图片描述

区别如下

官网的预览效果，只能单纯预览当前图片
改造之后，可以对预览图片进行放大、缩小、旋转、下一张等操作

实现代码

<el-upload
    action="#"
    multiple
    list-type="picture-card"
    :class="{'is-not-allow-access':picIDListCount>=3}"
    :file-list="imageUrls"
    :on-remove="handleRemove"
    :on-preview="handlePictureCardPreview"
    :on-success="uploadSuccess"
  >
    <span> <i class="el-icon-plus" style="font-size:14px;" ></i> 添加图片</span>
  </el-upload>
  <!-- 大图预览 -->
  <el-image-viewer
      v-if="showImgViewer"
      :on-close="closeImgViewer"
      :url-list="imagePreviewUrls"
      :z-index="3000"
      :initial-index="initialImgPreviewIndex"
  />

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  components: {
      ElImageViewer
  },
  data(){
    return {
      initialImgPreviewIndex:0, // 预览打开看到的图片下标
      imagePreviewUrls:[], // 预览图片的下标
    }
  },
  methods:{
    // 图片预览
    handlePictureCardPreview (file) {
      let index = this.imagePreviewUrls.indexOf(file.url)
      if (index >= 0) {
        this.initialImgPreviewIndex = index
      }
      this.showImgViewer = true
    },
    closeImgViewer () {
      this.showImgViewer = false
    },
    // 上传成功回调
    uploadSuccess (file, fileList) {
      if (fileList.status === 'success') {
        this.imagePreviewUrls.push(fileList.url) // 预览图片的数组
      }
    },
    // 删除选中的文件
    handleRemove (file) {
      // 删除预览数组对应的图片
      let index = this.imagePreviewUrls.indexOf(file.url)
      if (index > -1) {
        this.imagePreviewUrls.splice(index, 1)
      }
      // 执行删除
    },

  }