如何用Vue ElementUI实现支持多种格式（wordPDF图片等）的多文件上传及预览功能？

本文共计2327个文字，预计阅读时间需要10分钟。

目录 + 需求 + 实现

1.使用on-preview和window.open实现简易版预览效果

2.封装组件实现更完整的上传完成、预览功能

3.追加关于问题的更多比较问题回复

1.imgsrc路径

2.显示原ElementUI的那

目录

• 需求
• 实现需求
• 1、利用on-preview+window.open()实现简易版预览效果
• 2、封装组件实现更完整的上传完成、预览功能
• 追加关于问的比较多的问题回复
• 1、imgsrc路径
• 2、显示原本elementui的那个上传样式
• 3、file.response显示没有这个属性和方法
• 4、view.officeapps.live.com/op/view.aspx?src=${data}是干嘛的？预览PDF需要安装其他的插件吗？
• 总结

需求

最近在做vue2.0+element UI的项目中遇到了一个需求：需求是多个文件上传的同时实现文件的在线预览功能。需求图如下：

看到这个需求的时候，小栗脑袋一炸。并不知道该如何下手，之前的实践项目中也并没有遇到相似的功能。因此也废了一番功夫想要实现这样一个功能。