文件预览

在本地文件上传前或者对网络资源有些需要预览的场景，浏览器有自己对于文件的默认行为。对于图片、音频、视频或者pdf等资源，浏览器直接用自己默认的方式进行展示，对于浏览器不能使用默认的方式打开的，自动下载到本地进行预览。

• 极简预览

const fileUrl = typeof url === "string" ? url : URL.createObjectURL(url);
window.open(fileUrl, "_blank")

• 自定义预览

import { isImg, isVideo, isPdf } from "./files";
export function filePreview(url, name) {
  // 支持原生文件或者url文件的预览
  const fileUrl = typeof url === "string" ? url : URL.createObjectURL(url);
  const fileName = name;
  const cacheWrap = document.querySelector(".qb-preview-wrap");
  if (cacheWrap) {
    return;
  }
  // 文件容器
  const wrap = document.createElement("div");
  wrap.className = "qb-preview-wrap";
  // 插入关闭按钮
  const closeBtn = document.createElement("span");
  closeBtn.className = "el-previe-img-btn";
  const closeIcon = document.createElement("i");
  closeIcon.className = "el-icon-close";
  closeBtn.appendChild(closeIcon);
  closeBtn.addEventListener("click", function () {
    document.body.removeChild(wrap);
  });
  wrap.appendChild(closeBtn);
  // 图片
  const isImgFlag = isImg(fileName);
  if (isImgFlag) {
    const imgWrap = document.createElement("img");
    imgWrap.src = fileUrl;
    imgWrap.className = "qb-preview-img-wrap";
    wrap.appendChild(imgWrap);
    document.body.appendChild(wrap);
    return;
  }
  // 视频
  const isVideoFlag = isVideo(fileName);
  if (isVideoFlag) {
    const videoWrap = document.createElement("video");
    videoWrap.src = fileUrl;
    videoWrap.className = "qb-preview-video-wrap";
    videoWrap.controls = "controls";
    videoWrap.autoplay = true;
    wrap.appendChild(videoWrap);
    document.body.appendChild(wrap);
    return;
  }
  // pdf
  const isPdfFlag = isPdf(fileName);
  if (isPdfFlag) {
    const pdfWrap = document.createElement("iframe");
    pdfWrap.src = fileUrl;
    pdfWrap.className = "qb-preview-iframe-wrap";
    wrap.appendChild(pdfWrap);
    document.body.appendChild(wrap);
    return;
  }
  // 如果都不支持，直接下载
  window.open(fileUrl, "_blank");
}

附件：files文件

// getFileType获取文件类型
export function getFileType(fileName) {
  // 建立文件正则验证
  let reg =
    /(.doc)$|(.docx)$|(.pdf)$|(.ppt)$|(.pptx)$|(.xlsx)$|(.xls)$|(.zip)$|(.rar)$|(.txt)$|(.mp3)|(.mp4)$|(.jpg)$|(.png)$|(.jpeg)$/;
  return fileName.match(reg) ? fileName.match(reg)[0].slice(1) : null;
}
// 是否是文件
export function isImg(fileName) {
  const fileSuffix = getFileType(fileName);
  return (fileSuffix &&    (fileSuffix === "png" || fileSuffix === "jpg" || fileSuffix === "jpeg"));
}
// 是否是视频
export function isVideo(fileName) {
  const fileSuffix = getFileType(fileName);
  return fileSuffix && fileSuffix === "mp4";
}

// 是否是pdf
export function isPdf(fileName) {
  const fileSuffix = getFileType(fileName);
  return fileSuffix && fileSuffix === "pdf";
}

以上是极简的文件预览，也可以在其中进行更多功能的扩展。