el-upload 鼠标悬浮 预览png

el-upload 是一个基于 Element UI 的上传组件，用于实现文件上传功能。鼠标悬浮预览 PNG 图片可以通过设置 el-upload 的属性和事件来实现。

首先，需要在 el-upload 中设置 accept 属性为 "image/png"，这样可以限制用户只能选择上传 PNG 格式的文件。

其次，使用 slot 插槽来自定义 el-upload 组件的内容，例如：

<el-upload
  accept="image/png"
>
  <i class="el-icon-plus"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div slot="tip" class="el-upload__tip">只能上传 PNG 格式的图片</div>
</el-upload>

然后，在 el-upload 上监听 file-list-change 事件来获取文件列表，并通过遍历 fileList 中的文件来判断是否为 PNG 图片。对于 PNG 图片，可以使用 FileReader 对象读取文件内容，然后在悬浮时展示预览效果。

<el-upload
  accept="image/png"
  @file-list-change="handleFileListChange"
>
  ...
</el-upload>

methods: {
  handleFileListChange(fileList) {
    fileList.forEach(file => {
      if (file.type === 'image/png') {
        const reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = () => {
          // 使用 reader.result 来展示预览效果
        };
      }
    });
  }
}

在预览效果中，可以使用 img 标签的 src 属性绑定 reader.result 来展示 PNG 图片的预览效果。

综上所述，我们可以通过设置 accept 属性为 "image/png"，使用 slot 插槽自定义文件上传组件的内容，监听 file-list-change 事件来获取文件列表，使用 FileReader 对象读取 PNG 图片的内容，并通过预览效果来展示 PNG 图片。