el-upload 图片上传点击可放大预览

El-upload 是一款基于 Vue.js 的轻量级文件上传组件，它提供了一种方便的方式来处理图片和其他文件的上传操作。当图片上传后，el-upload 可能会展示一个缩略图预览功能，并允许用户通过单击缩略图进行放大查看。这通常通过监听 `preview` 或 `show-preview` 事件，在用户点击文件缩略图时，弹出一个模态框或者一个新的窗口，显示大尺寸的图片供用户预览。这个过程利用了 HTML5 的 `<img>` 元素的 `srcset` 和 `zoom` 属性，或者其他图片懒加载技术来实现实时放大效果。

举个例子，你可以设置一个预览方法：

<template>
  <el-upload
    :action="uploadUrl"
    :on-preview="(file) => handlePreview(file)"
    ...其他配置...
  ></el-upload>
</template>

<script>
export default {
  methods: {
    handlePreview(file) {
      const viewer = this.$refs.fileViewer; // 假设你有一个用于预览的大图容器 ref
      if (viewer) {
        viewer.src = file.url;
        viewer.classList.add('is-visible'); // 添加样式使其可见并可以放大
      }
    },
  }
}
</script>

在这个例子中，当用户点击文件时，`handlePreview` 方法会被触发，将图片的 URL 设置到预览区域，并切换相应的 CSS 类来启用放大的效果。