el-upload 点击文件预览pdf和图片

您可以使用以下代码示例来实现通过点击el-upload上传组件上传的文件进行预览PDF和图像。

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-api"
    :on-preview="handlePreview"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :auto-upload="false"
    :multiple="true"
    list-type="picture-card">
    <i class="el-icon-plus"></i>
    <div class="upload-text">点击上传</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isPDF = file.type === 'application/pdf';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG && !isPDF) {
        this.$message.error('只能上传 JPG、PNG、PDF 格式的文件!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!');
        return false;
      }
      return true;
    },
    handlePreview(file) {
      if (file.type === 'application/pdf') {
        // 预览 PDF 文件
        window.open(file.url);
      } else {
        // 预览图像文件
        this.$viewer.show(file.url, {
          title: file.name,
          navbar: true,
          toolbar: {
            zoomIn: 4,
            zoomOut: 4,
            oneToOne: 4,
            reset: 4,
            prev: 0,
            play: {
              show: false,
            },
            next: 0,
            rotateLeft: 0,
            rotateRight: 0,
            flipHorizontal: 0,
            flipVertical: 0,
          },
        });
      }
    },
  },
};
</script>

在上面的示例中，我们使用了element-ui的el-upload上传组件，并设置了上传文件的类型和大小限制。我们还绑定了before-upload和on-preview事件，处理上传和预览文件的逻辑。

在before-upload方法中，我们检查上传的文件类型和大小是否符合要求，并返回true或false。如果返回false，则不会上传文件。

在handlePreview方法中，我们根据文件类型分别处理预览PDF和图像文件的逻辑。对于PDF文件，我们使用window.open打开文件URL以进行预览。对于图像文件，我们使用$viewer插件打开文件URL以进行预览。您需要在项目中安装和导入此插件。