el-upload 文件预览 pdf 和 图片

el-upload 组件可以预览 pdf 和图片，具体方法如下：

1. 引入 pdf.js 和 pdf.worker.js

在 HTML 文件中引入 pdf.js 和 pdf.worker.js 文件，可以从官网下载或者使用 CDN 引入。

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="//mozilla.github.io/pdf.js/build/pdf.worker.js"></script>

2. 设置 el-upload 的 props

在 el-upload 组件中设置 props，包括：

- list-type：设置为 "picture-card" 或者 "text"，分别表示图片和 pdf 的预览方式；
- before-upload：在上传之前，使用 pdf.js 预览 pdf 文件；
- preview-src-list：图片和 pdf 文件的预览链接。

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :list-type="'picture-card'"
    :before-upload="handleBeforeUpload"
    :preview-src-list="previewList">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

3. 编写 handleBeforeUpload 方法

在 methods 中编写 handleBeforeUpload 方法，使用 pdf.js 预览 pdf 文件，将预览链接存储在 previewList 中。

<script>
export default {
  data() {
    return {
      previewList: []
    };
  },
  methods: {
    handleBeforeUpload(file) {
      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = () => {
        pdfjsLib.getDocument({ data: new Uint8Array(reader.result) }).promise.then(pdf => {
          pdf.getPage(1).then(page => {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            const viewport = page.getViewport(1.0);
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            page.render({ canvasContext: ctx, viewport: viewport }).promise.then(() => {
              this.previewList.push(canvas.toDataURL("image/png"));
            });
          });
        });
      };
      return false;
    }
  }
};
</script>

4. 预览效果

上传图片和 pdf 文件后，即可在 el-upload 组件中看到预览效果。图片和 pdf 文件的预览链接存储在 previewList 中，可以根据需要进行使用。