el-upload上传文件回显PDF

el-upload是element-ui提供的一个文件上传组件，可以实现上传文件的功能。关于回显PDF，需要在上传文件成功后，在回调函数中获取到上传成功后的文件地址，然后使用PDF.js库进行PDF文件的渲染。

具体实现可以参考以下步骤：
1. 在el-upload组件中设置上传成功后的回调函数，将上传成功后的文件地址保存到data中；
2. 在页面中引入PDF.js库；
3. 在mounted钩子函数中初始化PDF.js库；
4. 在watch中监听data中文件地址的变化，一旦变化就使用PDF.js库进行渲染。

示例代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleUploadSuccess">
    <el-button slot="trigger">选取文件</el-button>
    <el-button type="primary" slot="tip">上传文件</el-button>
  </el-upload>
  <div id="pdf-container"></div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  data() {
    return {
      fileUrl: '' // 保存上传成功后的文件地址
    }
  },
  mounted() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js'
  },
  watch: {
    fileUrl(newValue) {
      if (newValue) {
        this.renderPdf(newValue)
      }
    }
  },
  methods: {
    handleUploadSuccess(response) {
      this.fileUrl = response.data.url
    },
    async renderPdf(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      const pdf = await loadingTask.promise
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const scale = 1.5
      const viewport = pdf.getPage(1).getViewport({ scale })
      canvas.height = viewport.height
      canvas.width = viewport.width
      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      }
      pdf.getPage(1).render(renderContext)
      document.getElementById('pdf-container').appendChild(canvas)
    }
  }
}
</script>