一行JavaScript代码实现预览图片、视频、文件

更新时间：2026年04月03日 08:25:20 作者：niceTJH

在Web开发中,实现图片选择与预览功能是常见的需求,这篇文章主要介绍了JavaScript代码实现预览图片、视频、文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

简介

一行代码实现预览是我在公司内搭建的前端组件库中的一个功能。目的是解决预览方式不统一、预览不同类型资源困难、预览实现代码混乱的问题。这个功能从提出到落地应用，极大提高了我的开发效率（更多摸鱼时间）！

tips: 需要注意的是，这个功能依赖于云对象OSS存储，这也是大多数企业存储文件的方式，个人项目需要根据实现原理另行封装改造。

预览演示

此处为我部署在公司内网的文档站点，演示各类资源的预览效果。

实现原理

这里用简单代码展示原理，方便理解。实际开发中会进行大量优化，以及调整预览UI、预览功能等等。

3.1 根据uuid获取url

文件存储服务依赖uuid来区分文件，避免同名文件覆盖问题。一般在公司前端基建中已经封装好了工具函数，可以通过uuid获取文件地址。类似下面这种格式：

export async function getUrlByUuid (uuid: string): Promise<string> {
    // ...
}

3.2 通过url计算预览信息

从云存储厂商返回的url中，我们能计算出很多信息。我总结了下有这些：fileName、fileExt、fileType，将它们统一放在名为预览信息的对象里。

interface PreviewInfo {
    url: string; // oss文件地址
    fileName: string; // 文件名称
    fileExt: string; // 文件后缀 (例如："doc")
    fileType: 'img' | 'file' | 'video'; // 文件类型
}
export async function getPreviewInfoFromUrl (url: string): PreviewInfo {
    // 根据url计算预览信息
    // ...
}

3.3 预览图片

为了用于预览时缩放、移动图片的功能，我选择基于antd的Image组件进行封装，并通过函数调用的方式预览。

图片预览模板组件：

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文件可预览地址举例，需要公司事先拥有预览文件的在线网址。如果没有的话，需要去搭建一个类似的站点提供服务，方便后期一处维护所有项目生效。类似于这样的方式：

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 代码实现

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代码实现预览图片、视频、文件的文章就介绍到这了,更多相关js预览图片、视频、文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序实现文件预览
这篇文章主要为大家详细介绍了微信小程序实现文件预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
js实现模态窗口增加与删除
这篇文章主要为大家详细介绍了js实现模态窗口增加与删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JS中Select下拉列表类(支持输入模糊查询)功能
这篇文章主要介绍了JS中Select下拉列表类(支持输入模糊查询)功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-01-01
js创建对象的方式总结
这篇文章主要介绍了js创建对象的方式,实例总结了3种常用的创建对象的方式,非常实用,需要的朋友可以参考下
2015-01-01
JS中的数组的some()方法示例解析
some()方法用于检测数组中的元素是否满足指定条件函数提供,这篇文章主要介绍了JS中的数组的some()方法示例解析,需要的朋友可以参考下
2025-04-04
javascript通过navigator.userAgent识别各种浏览器
识别各种浏览器的实现原理是根据navigator.userAgent返回值识别，下面有个不错的示例，感兴趣的朋友可以参考下
2013-10-10
javascript实现在线客服效果
这篇文章主要介绍了javascript实现在线客服效果的实例代码，非常不错，这里推荐给大家，有需要的小伙伴可以参考下。
2015-07-07
Jquery中删除元素的实现代码
empty用来删除指定元素的子元素，remove用来删除元素，或者设定细化条件执行删除
2011-12-12
JavaScript字符串String和Array操作的有趣方法
字符串和数组在程序编写过程中是十分常用的类型,因此程序语言都会将String和Array作为基本类型，并提供许多字符串和数组的方法来简化对字符串的操作
2012-12-12
前端使用JS内置Blob实现下载各种形式的文件实例
通过使用JavaScript我们可以很方便地实现文件的下载功能,这篇文章主要给大家介绍了关于前端使用JS内置Blob实现下载各种形式文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-06-06