在做項目的時候，突然接收到一個需求，是能夠對其他用戶上傳的文件進行預覽，然后再下載，搜索了一些方法，最終選擇了下面的實現，因為只是需要看，不進行而外的操作，所以方法都是比較簡單的，后續有其他需求在更新。

office文件

使用了MicroSoft官方的office預覽模式，該模式的實現非常簡單，就是在已有的文件地址前面加入 https://view.officeapps.live.com/op/view.aspx?src= 這一串路由，等于是通過前面的路由封裝了你的文件路由：// method

let preUrl = 'https://view.officeapps.live.com/op/view.aspx?src='+ selfUrl + (token)

// render

{preType === 'office' && (

)}

ps:這個服務不支持ip地址的url，需要域名url

效果圖：

pdf文件

一開始準備使用pdf.js或者是jquery.media來實現，后來考慮到不需要額外操作，只是預覽，后臺更改了那邊的服務，直接在網頁渲染，現在的瀏覽器基本都能夠渲染pdf文件，方法同上：// method

let preUrl = (host) + selfUrl + (token)

// render

{preType === 'pdf' && (

)}

效果圖：

Video & Audio

對于音頻和視頻文件，使用了 Html 5 的 標簽，定義一個 video 并傳入 url :// method

let preUrl = (host) + selfUrl + (token)

// render

{(preType === 'video' || preType === 'audio') && (

)}

效果圖：

Image

就用 標簽就好啦，這還要說什么，頂多就是可能有多張圖片加一個上一張下一張的判定函數。

總結

以上是生活随笔為你收集整理的python实现文件上传预览_前端实现文件预览功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。