vue vant 移动上传pdf组件

你可以使用 vant 的上传组件，同时使用 pdf.js 库来实现上传 PDF 文件并在移动端预览。具体实现步骤如下：

1. 在项目中安装 vant 和 pdf.js 库：

npm install vant pdfjs-dist

2. 在组件中引入 vant 的上传组件和 pdf.js 库：

import { Uploader } from 'vant';
import pdfjsLib from 'pdfjs-dist';

3. 在组件中使用 vant 的上传组件：

<van-uploader
  v-model="fileList"
  :upload-text="'上传PDF'"
  :after-read="afterRead"
  accept="application/pdf"
  multiple
/>

其中，v-model 绑定文件列表，upload-text 设置上传按钮文本，after-read 指定上传后的回调函数，accept 设置只允许上传 PDF 文件，multiple 允许上传多个文件。

4. 在回调函数中使用 pdf.js 库来预览 PDF 文件：

afterRead(file) {
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = () => {
    pdfjsLib.getDocument({ data: reader.result }).promise.then(pdf => {
      pdf.getPage(1).then(page => {
        const canvas = document.createElement('canvas');
        const viewport = page.getViewport({ scale: 1 });
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        page.render({ canvasContext: context, viewport }).promise.then(() => {
          const url = canvas.toDataURL();
          window.open(url);
        });
      });
    });
  };
}

在该函数中，先使用 FileReader 将文件转为 ArrayBuffer，然后使用 pdf.js 的 getDocument 方法获取 PDF 文档对象，并使用 getPage 方法获取第一页。接着，创建一个 canvas 元素，设置其大小为第一页的大小，使用 page.render 方法将 PDF 渲染到 canvas 上，并将 canvas 转为 data URL，最后使用 window.open 打开预览窗口。

这样就可以在移动端上传 PDF 文件并预览了。