Vue 3 中文件上传交互怎么实现 PDF 文件的在线预览

阿芳同学_7387

阿芳同学_7387

2026-10-21

437人浏览

原创

vue 3 中实现“上传后立即预览 pdf”的核心是直接用 filereader 将本地 file 对象读取为 arraybuffer,再传给 vue-pdf-embed 等组件渲染,全程离线、不依赖后端,兼顾速度、隐私与体验。

vue 3 中文件上传交互怎么实现 pdf 文件的在线预览

在 Vue 3 中实现“上传后立即预览 PDF”,关键不是等文件存到服务器再拉链接,而是直接用浏览器本地能力解析用户选中的文件对象(File),转成可被 PDF 渲染组件识别的格式(如 ArrayBuffer 或 Blob URL),全程不经过后端。这样响应快、隐私好、体验顺滑。

上传后立刻读取并预览(不走后端)

用户点击上传按钮选择文件后,通过 input[type="file"] 获取 File 对象,用 FileReader 读取为 ArrayBuffer,再传给 vue-pdf-embed 或 vue3-pdfjs 这类组件:

  • 监听 @change 事件,拿到 event.target.files[0]
  • 创建 FileReader,调用 readAsArrayBuffer(file)
  • 在 onload 回调中,把 reader.result(即 ArrayBuffer)赋值给组件的 :source 属性
  • 组件会自动触发解析和渲染,无需额外请求

这种方式完全离线,适合合同预审、简历上传确认等场景,也规避了跨域、权限、水印延迟等问题。

上传成功后再预览(服务端返回流或地址)

如果业务要求必须先上传到后端(比如要校验、加水印、存记录),那预览分两步走:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习