vue PDF文件上传后，有前端生成对应的H5预览，供APP展示。 PDF文件，仅支持上传一个文件。

在Vue.js中，实现PDF文件上传并提供H5预览功能通常涉及以下几个步骤：

1. **HTML结构**：首先，在HTML中创建一个文件输入元素用于选择PDF文件，并添加一个按钮触发上传操作。

<input type="file" accept=".pdf" @change="uploadFile" />
<button @click="previewPdf">预览PDF</button>
<template #pdfPreview></template> <!-- 使用v-if或v-show控制预览区域的显示 -->

2. **JS函数**：在Vue组件的methods里，定义`uploadFile`函数处理文件上传，以及`previewPdf`函数生成PDF预览链接。

methods: {
  uploadFile(e) {
    const file = e.target.files[0];
    // ... 上传到服务器或第三方服务
    this.pdfUrl = 'your-generated-url'; // 存储预览链接
  },
  previewPdf() {
    if (this.pdfUrl) { // 验证是否有预览链接
      this.$refs.pdfPreview.href = this.pdfUrl; // 显示预览
    }
  }
}

3. **模板渲染**：如果使用了如Element UI等UI库，可以利用其提供的`el-preview`组件进行预览，或者自定义一个简单的预览区，比如使用iframe嵌入。

<template>
  <div>
    <input type="file" @change="uploadFile" />
    <button @click="previewPdf">预览PDF</button>
    <el-preview :src="pdfUrl" v-if="pdfUrl"></el-preview>
    <template #pdfPreview><iframe :src="pdfUrl" frameborder="0" width="100%" height="480px"></iframe></template>
  </div>
</template>

请注意，这只是一个基础示例，实际应用中还需要考虑错误处理、进度反馈和兼容性等问题。同时，对于跨域访问的PDF文件，可能需要后端配合设置CORS策略。