vue文件选择,vue预览文件实现

　　这种需求在vue移动项目中经常遇到，一些上传的附件点击后可以在线预览。所以下面这篇文章主要介绍vue3中各类文件预览功能的相关信息，有需要的朋友可以参考一下。

前言

　　摸着石头过河很难。听说大厂老板都忙着用vue3升级项目，我也没啥事。在小厂还是不愿意折腾。做个新项目，直接上vue3，头脑发热。有些人可能比较鲁莽，但是跌跌撞撞之后基本就完了。我们来记录一下。

　　今天就来说说开发过程中的某个功能吧！反正要花很多时间。先说功能需求：上传文件后可以点击文件列表预览。媒体类型包括图片、word excel和其他文档文件、pdf、视频和音频预览，适用于pc。

1.office文档类型的预览

　　首先看到了word excel等文档的预览。我开始在网上搜索一些解决问题的方法。毕竟我没什么经验。有人推荐A标签直接下载预览，显然没有达到我们的预期。有些人推荐excel使用sheetjs，但我们word也需要找到另一种方法。最后决定用微软的在线预览版，用iframe作为载体。

　　iframe frame border=“0”

　　:src= https://view . office apps . live . com/op/view . aspx？src= fileUrl width=100%

　　/iframe

　　需要考虑的是，在我当时的element-plus的对话框中，iframe不能很好的打开父元素，所以我填了一些代码。而且加载过程比较慢，由于时间原因没有尝试其他方法。

2.pdf类型的预览

　　对于这种pdf的预览，感觉好容易解决。用之前用过的npm install pdfjs-dist，就结束了。我从来没想过我这个目前不支持vue3，一上来就跑，自然报错。果断点，百度。百度告诉我这个pdfjs-dist vue3不支持返回。我们换个方法吧，我* * *，你说我想办法。主角来了下载后，把build和web文件夹放在我们的public文件下做参考。注意他的地址是否正确。我把它嵌入了。

　　data.pdfUrl=。/pdf/web/viewer.html？file= type//在线预览

　　embed:src= PD furl style= width:100%；/

3. 图片类型

　　我觉得这种类型，我们不用多说，直接去代码，处理url就行了。

　　 div v-if= showImg==true class= dialog-body-content-base-style

　　el图像

　　class=图像预览

　　:src=imgUrl

　　/div

4.视频类型

　　对于视频类型，我原本想直接使用视频元素，但我是一个追求程，追求自己的理想。我开始用Vue-video-palmer预览视频，但是就是不行。我在vue3报错了，说白了就是又来了。宝贝，我没支持vue3？我已经习惯了。推荐你用一波vue-vam-video。

　　npm安装

　　从“vue-vam-video”导入VamVideo

　　组件：{

　　吸血鬼视频，

　　设置(道具、上下文){

　　常数数据=反应({

　　视频选项：{

　　属性：{

　　海报：，

　　src: ，

　　预加载：“自动”，

　　//loop: loop ，

　　//自动播放：自动播放，

　　//静音：真

　　视频风格：{

　　宽度：“100%”，

　　//高度： 600像素，

　　控件配置：{

　　全屏标题：“全屏”，

　　Escfullscreen:退出全屏，

　　SpeedTit，双速，

　　《音良帖》:“卷”，

　　静音贴：“静音”，

　　PlayTit:“播放”，

　　暂停：暂停，

　　全屏：没错，

　　速度：真的，

　　听：真的

　　}

　　})

　　}

　　视频

　　:properties= video option . properties

　　:video style= video option . video style

　　:controls config= video option . controls config

　　@play=playVideo

　　@canplay=canplayVideo

　　@pause=pauseVideo

　　/VAM-视频

5. 音频类型

　　在遭受了以上损失之后，我终于决定用标签音响了，直接用就完了。

　　音频：src=musicUrl 控件/音频

　　综上所述，建议你考虑周全。像大厂这样的大老板都有自己的组件库，完全不用担心，但是小厂还是要谨慎。希望vue有更多的组件库，更完善的函数库。毕竟站在巨人的肩膀上方便。多研究一下源代码也是可以的。

总结

　　这就是这篇关于在vue3中预览各种类型文件的文章。更多关于vue3中各种类型文件的预览，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。