一行JavaScript代碼實現(xiàn)預覽圖片、視頻、文件
更新時間：2026年04月03日 08:25:20 作者：niceTJH
在Web開發(fā)中,實現(xiàn)圖片選擇與預覽功能是常見的需求,這篇文章主要介紹了JavaScript代碼實現(xiàn)預覽圖片、視頻、文件的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
用最簡單的使用方式，實現(xiàn)大多數(shù)類型資源的預覽。
IPreview.previewUuid('xxxx-xxxx-xxxx-xxxx');簡介
一行代碼實現(xiàn)預覽 是我在公司內(nèi)搭建的前端組件庫中的一個功能。目的是解決預覽方式不統(tǒng)一、預覽不同類型資源困難、預覽實現(xiàn)代碼混亂的問題。這個功能從提出到落地應用，極大提高了我的開發(fā)效率（更多摸魚時間）！
tips: 需要注意的是，這個功能依賴于云對象OSS存儲，這也是大多數(shù)企業(yè)存儲文件的方式，個人項目需要根據(jù)實現(xiàn)原理另行封裝改造。
預覽演示
此處為我部署在公司內(nèi)網(wǎng)的文檔站點，演示各類資源的預覽效果。
實現(xiàn)原理
這里用簡單代碼展示原理，方便理解。實際開發(fā)中會進行大量優(yōu)化，以及調(diào)整預覽UI、預覽功能等等。
3.1 根據(jù)uuid獲取url
文件存儲服務依賴uuid來區(qū)分文件，避免同名文件覆蓋問題。一般在公司前端基建中已經(jīng)封裝好了工具函數(shù)，可以通過uuid獲取文件地址。類似下面這種格式：
export async function getUrlByUuid (uuid: string): Promise<string> {
// ...
}3.2 通過url計算預覽信息
從云存儲廠商返回的url中，我們能計算出很多信息。我總結了下有這些：fileName、fileExt、fileType，將它們統(tǒng)一放在名為預覽信息的對象里。
interface PreviewInfo {
url: string; // oss文件地址
fileName: string; // 文件名稱
fileExt: string; // 文件后綴 (例如："doc")
fileType: 'img' | 'file' | 'video'; // 文件類型
}
export async function getPreviewInfoFromUrl (url: string): PreviewInfo {
// 根據(jù)url計算預覽信息
// ...
}3.3 預覽圖片
為了用于預覽時縮放、移動圖片的功能，我選擇基于antd的Image組件進行封裝，并通過函數(shù)調(diào)用的方式預覽。
圖片預覽模板組件：
function PreviewImage ({src, onClose}) {
return (
<Image
preview={{
src,
visible: true,
onVisibleChange: value => {
if (!value) {
onClose?.()
}
}
}}
/>
)
}預覽圖片：
// React 16
type Unmount = () => void;
// 打開預覽彈窗
function openPreview (Template: React.FC, previewInfo: PreviewInfo): Unmount {
let div = document.createElement('div');
let el = React.createElement(Template, {
src: previewInfo.url,
onClose: unmount
})
document.body.appendChild(div);
// 將React元素渲染到div，讓預覽組件生效
ReactDOM.render(el, div);
// 卸載
function unmount () {
if (!div) return;
ReactDOM.unmountComponentAtNode(div);
div.remove();
div = null;
el = null;
}
return unmount;
}
// 預覽圖片
function previewImgUrl (previewInfo: PreviewInfo) {
openPreview(PreviewImage, previewInfo)
}3.4 預覽文件
預覽文件這一步需要注意的是：需要獲取可預覽的url地址，否則文件有些會直接下載，例如doc。以doc文件可預覽地址舉例，需要公司事先擁有預覽文件的在線網(wǎng)址。如果沒有的話，需要去搭建一個類似的站點提供服務，方便后期一處維護所有項目生效。類似于這樣的方式：
https://my.previewfile.com?url=【encodeURIComponent(oss地址)】
預覽Iframe模板組件：
import { Modal } from 'antd'
function PreviewIframe ({src, onClose}) {
const [visible, setVisible] = useState(true);
return (
<Modal
visible={visible}
title="預覽文件"
afterClose={onClose}
onCancel={() => setVisible(false)}
footer={null}
>
<iframe src={src} style={{width: '80vw',height: '80vh'}}/>
</Modal>
)
}預覽文件
// React 16
function previewFileUrl (previewInfo: PreviewInfo): Unmount {
return openPreview(PreviewIframe, previewInfo)
}3.5 預覽視頻
預覽視頻，我這里選擇的是 aliplayer-react，將其封裝成視頻彈窗模板。
預覽視頻模板組件：
import { Modal } from 'antd';
import Player from 'aliplayer-react';
// Video默認配置項
const INITIAL = {
source: '',
width: '100%',
height: '100%',
autoplay: true,
isLive: false,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: 'hover',
useH5Prism: true,
components: [
{
name: 'RateComponent',
type: Player.components.RateComponent,
},
],
};
function PreviewVideo ({src, onClose}) {
const [visible, setVisible] = useState(true);
// 配置添加視頻地址
const videoConfig = useMemo(() => {
return {
...INITIAL,
source: src
}
}, [])
return (
<Modal
visible={visible}
title="預覽文件"
afterClose={onClose}
onCancel={() => setVisible(false)}
footer={null}
>
<Player config={videoConfig} />
</Modal>
)
}預覽文件
// React 16
function previewVideoUrl (previewInfo: PreviewInfo) {
openPreview(PreviewVideo, previewInfo)
}previewUuid 代碼實現(xiàn)
class Preview {
// 其他功能
// ...
// 預覽文件oss地址
public async previewUuid (uuid: string) {
const url = await getUrlByUuid(uuid);
return this.previewUrl(url)
}
// 預覽文件uuid
public async previewUrl (ossUrl: string) {
const previewInfo = await getPreviewInfoFromUrl(ossUrl);
// 預覽不同文件
switch (previewInfo.fileType) {
case 'img': // 預覽圖片
previewImgUrl(previewInfo)
break;
case 'file': // 預覽文件
previewFileUrl(previewInfo)
break;
case 'video': // 預覽視頻
previewVideoUrl(previewInfo)
break;
default:
message.warn(`.${previewInfo.fileExt}格式文件暫不支持預覽!`)
break;
}
}
}總結
到此這篇關于JavaScript代碼實現(xiàn)預覽圖片、視頻、文件的文章就介紹到這了,更多相關js預覽圖片、視頻、文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
本文主要介紹了JavaScript宏任務和微任務執(zhí)行順序，結合實例代碼進行了詳細的講解，需要的朋友們下面隨著小編來一起學習學習吧
2021-06-06 
本文主要介紹了通過js-linq庫在JavaScript中實現(xiàn)類似.NET LINQ的查詢功能,封裝Where、Select、OrderBy等方法,提升數(shù)組和可迭代對象的數(shù)據(jù)處理效率與代碼可讀性
2025-09-09 
JavaScript 中 JSON.parse 函數(shù) 和 JSON.stringify 函數(shù)
這篇文章主要介紹了JavaScript -- JSON.parse 函數(shù) 和 JSON.stringify 函數(shù),本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-12-12 
ECharts 是一個使用JavaScript實現(xiàn)的開源可視化庫，涵蓋各行業(yè)圖表，滿足各種需求。這篇文章介紹了ECharts的基礎知識，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06 
這篇文章主要介紹了ECMAScript6中Set/WeakSet詳解的相關資料,需要的朋友可以參考下
2015-06-06 
這篇文章主要介紹了js實現(xiàn)單擊圖片放大圖片的方法,涉及javascript操作圖片的技巧與onclick事件的用法,需要的朋友可以參考下
2015-02-02 
在傳統(tǒng)面向?qū)ο笳Z言中，this關鍵字是個很乖的小孩，從不亂跑，該是誰的就是誰的?？墒窃贘avaScript中，我們發(fā)現(xiàn)它不那么乖，有時甚至把我們搞的暈頭轉(zhuǎn)向的。所以有必要對它稍微做個總結。
2010-10-10 
這篇文章主要介紹了JavaScript設計模式之觀察者模式,結合實例形式詳細分析了javascript觀察者模式的概念、原理、用法及相關操作注意事項,需要的朋友可以參考下
2019-01-01 
關于獲取DIV內(nèi)部內(nèi)容報錯的原因分析及解決辦法
這篇文章主要介紹了關于獲取DIV內(nèi)部內(nèi)容報錯的原因分析及解決辦法的相關資料,需要的朋友可以參考下
2016-01-01