前端el-upload预览

前端的Element UI组件`el-upload`（上传组件）提供了图片预览的功能，它允许用户选择文件并实时查看文件内容。当用户上传图片时，如果配置了`on-preview`事件处理器，这个事件会在每个文件加载到内存中时触发，你可以在这个回调里处理预览图片的操作。

例如，在HTML部分，你可以这样做：

<el-upload
  action="http://example.com/upload"
  :on-preview="handlePreview"
  ...其他属性...
>
  <i class="el-icon-upload"></i> Click to upload
</el-upload>

然后在JavaScript中实现`handlePreview`函数：

methods: {
  handlePreview(file) {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    // 这里可以添加一些CSS样式、显示层等来展示图片
    img.onload = function () {
      if (img.width > img.height) {
        // 如果图片宽高比不合适，可以根据需求调整布局
        img.style.maxWidth = '100%';
        img.style.maxHeight = 'auto';
      } else {
        img.style.maxWidth = 'auto';
        img.style.maxHeight = '100%';
      }
    };
    return false; // 阻止默认的预览操作，通常不需要返回，这里仅为示例
  },
}