node文件資源管理器的圖片預覽從零實現(xiàn)

更新時間：2023年12月21日 15:38:25 作者：寒露

這篇文章主要為大家介紹了node文件資源管理器的圖片預覽從零實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

使用技術(shù)

使用 Next.js 的 Image 組件顯示圖片。自帶圖片壓縮生成快速預覽的 webp 格式圖片
使用 antd 的 PreviewGroup 組件實現(xiàn)原圖瀏覽，自帶縮小、放大、上一張、下一張等功能

功能實現(xiàn)

文件樹

explorer/src/app/path/[[...path]]/card-display.tsx
explorer/src/app/path/[[...path]]/page.tsx
explorer/src/components/preview/ext-rxp.tsx
explorer/src/components/preview/index.tsx
explorer/src/components/preview/proview-group-context.tsx
explorer/src/components/use-replace-pathname.ts

文件路徑：explorer/src/components/preview/ext-rxp.tsx

一些判斷文件后綴名方法

export const ImgRxp = /\.(jpg|jpeg|gif|png|webp|ico)$/i
const RawRxp = /\.(cr2|arw)/i
const GifRxp = /\.(gif)$/i
const ZipRxp = /\.(zip|rar|7z|tar\.xz|tar)(\.+\d+)?$/i
const VideoRxp = /\.(mp4|mkv|mov|wmv|avi|avchd|flv|f4v|swf)(\.+\d+)?$/i
export const isRaw = (path: string) => RawRxp.test(path)
export const isImage = (path: string) => ImgRxp.test(path)
export const isGif = (path: string) => GifRxp.test(path)
export const isZip = (path: string) => ZipRxp.test(path)
export const isVideo = (path: string) => VideoRxp.test(path)

文件路徑：explorer/src/components/preview/index.tsx

預覽封裝組件，根據(jù)是否為文件夾、視頻、圖片、壓縮包顯示不同的 icon。

點擊圖片時，使用 antd 的 PreviewGroup 組件查看原圖。

import React from 'react'
import { FileOutlined, FileZipOutlined, FolderOutlined, VideoCameraOutlined } from '@ant-design/icons'
import Image from 'next/image'
import { isGif, isImage, isVideo, isZip } from '@/components/preview/ext-rxp'
import { usePreviewGroupDispatch } from '@/components/preview/proview-group-context'
import { ReaddirItemType } from '@/explorer-manager/src/type'
import { useReplacePathname } from '@/components/use-replace-pathname'
const Preview: React.FC<{ item: ReaddirItemType }> = ({ item }) => {
  const previewGroupDispatch = usePreviewGroupDispatch()
  const { name, is_directory } = item
  const { staticPath, joinSearchPath } = useReplacePathname()
  if (is_directory) {
    return <FolderOutlined />
  }
  if (isVideo(name)) {
    return <VideoCameraOutlined />
  }
  if (isImage(name)) {
    const image_path = staticPath(name)
    return (
      <Image
        onClick={() => previewGroupDispatch(name)}
        src={image_path}
        alt={name}
        fill
        sizes="375px"
        style={{
          objectFit: 'scale-down', //"contain" | "cover" | "fill" | "none" | "scale-down"
        }}
        unoptimized={isGif(image_path)}
        placeholder="empty"
      />
    )
  }
  if (isZip(name)) {
    return <FileZipOutlined />
  }
  return <FileOutlined />
}
export default Preview

文件路徑：explorer/src/components/preview/proview-group-context.tsx

antd PreviewGroup 組件封裝。

需要在頂層目錄插入 PreviewGroupProvider 上下文組件，導出 usePreviewGroup、usePreviewGroupDispatch 讀寫方法。

'use client'
import React from 'react'
import { Image as AntdImage } from 'antd'
import { findIndex } from 'lodash'
import { isImage } from '@/components/preview/ext-rxp'
import { useReplacePathname } from '@/components/use-replace-pathname'
import createCtx from '@/lib/create-ctx'
import { useReaddirContext } from '@/app/path/readdir-context'
export const PreviewGroupContent = createCtx<string>()
export const usePreviewGroup = PreviewGroupContent.useStore
export const usePreviewGroupDispatch = PreviewGroupContent.useDispatch
const AntdImagePreviewGroup: React.FC<React.PropsWithChildren> = ({ children }) => {
  const { staticPath } = useReplacePathname()
  const readdir_list = useReaddirContext()
  const image_list = readdir_list.filter((item) => isImage(item.name))
  const name = usePreviewGroup()
  const previewGroupDispatch = usePreviewGroupDispatch()
  return (
    <AntdImage.PreviewGroup
      preview={{
        visible: !!name,
        current: findIndex(image_list, { name }),
        onVisibleChange: () => {
          previewGroupDispatch('')
        },
        onChange: (current) => {
          previewGroupDispatch(image_list[current].name)
        },
      }}
      items={image_list.map(({ name }) => staticPath(name))}
    >
      {children}
    </AntdImage.PreviewGroup>
  )
}
const PreviewGroupProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <PreviewGroupContent.ContextProvider value={''}>
      <AntdImagePreviewGroup>{children}</AntdImagePreviewGroup>
    </PreviewGroupContent.ContextProvider>
  )
}
export default PreviewGroupProvider

文件路徑：explorer/src/components/use-replace-pathname.ts

添加一個獲取不同路徑的hooks

replace\_pathname 將不需要的一級路徑 /path/ 過濾掉
joinSearchPath 拼接過濾掉 /path/ 的 pathname
joinPath 拼接未過濾的 pathname
staticPath 拼接得到獲取文件地址

import { usePathname } from 'next/navigation'
export const pathExp = /(^\/)?path/
export const encodePathItem = (path: string) => {
  return path
    .split('/')
    .map((text) => encodeURIComponent(text))
    .join('/')
}
export const useReplacePathname = () => {
  const pathname = decodeURIComponent(usePathname() || '')
  const replace_pathname = pathname.replace(pathExp, '')
  const joinSearchPath = (path: string) => encodePathItem(`${replace_pathname}/${path}`)
  const joinPath = (path: string) => encodePathItem(`${pathname}/${path}`)
  const staticPath = (path: string) => `/static${joinSearchPath(path)}`
  return {
    pathname: pathname,
    replace_pathname: replace_pathname,
    joinSearchPath: joinSearchPath,
    joinPath: joinPath,
    staticPath: staticPath,
  }
}

文件路徑：explorer/src/app/path/[[...path]]/card-display.tsx

將 Preview 組件插入 List Item 內(nèi)

...
import Preview from '@/components/preview'
const CardDisplay: React.FC = () => {
  const pathname = usePathname()
  const readdir = useReaddirContext()
  const column = useCardColumnContext()
  return (
    <List
...
                  <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
                    <Preview item={item} />
                  </div>
...

文件路徑：explorer/src/app/path/[[...path]]/page.tsx

將 PreviewGroupProvider 組件插入最頂部

...
import PreviewGroupProvider from '@/components/preview/proview-group-context'
const Page: React.FC = () => {
  const display_type = useDisplayTypeContext()
  return <PreviewGroupProvider>{display_type === 'table' ? <TableDisplay /> : <CardDisplay />}</PreviewGroupProvider>
}
export default Page