🤷‍♂️Vue-根据文件后缀渲染不同的图片(demo)

1.创建 commonUtil.js 文件

//匹配文件后缀
export function matchFileSuffixType(fileName) {
  // 后缀获取
  var suffix = "";
  // 获取类型结果
  var result = "";
  try {
    var flieArr = fileName.split(".");
    suffix = flieArr[flieArr.length - 1];
  } catch (err) {
    suffix = "";
  }
  // fileName无后缀返回 false
  if (!suffix) {
    result = false;
    return result;
  }
  // 图片格式
  var imglist = ["png", "jpg", "jpeg", "bmp", "gif", "tif", "tiff"];
  // 进行图片匹配
  result = imglist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = "image";
    return result;
  }
  // 匹配txt
  var txtlist = ["txt"];
  result = txtlist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = "txt";
    return result;
  }
  // 匹配 doc文件
  var officelist = ["doc"];
  result = officelist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = "doc";
    return result;
  }
  // -----------pdf---------------
  var pdf = ["pdf"];
  result = pdf.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = "pdf";
    return result;
  }
  // 匹配xlsx文件类型
  var download = ["xlsx", "xls"];
  result = download.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = "xls";
    return result;
  }
  // 匹配压缩文件
  var ziplist = ["zip", "rar", "jar", "tar", "gzip"];
  result = ziplist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = "zip";
    return result;
  }
  // 匹配 视频
  var videolist = ["mp4", "m2v", "mkv"];
  result = videolist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = "video";
    return result;
  }
  // 匹配 音频
  var radiolist = ["mp3", "wav", "wmv"];
  result = radiolist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = "radio";
    return result;
  }
  // 其他 文件类型
  result = "other";
  return result;
}

2.在vue中使用

<li v-for="(item, index) in AppendixData" :key="index">
  <!-- 附件路径 -->
  <!-- 根据文件后缀显示不同的图片 -->
  <img :src="require(`./image/${matchFileSuffixType(item.fileType)}.png`)" alt="" />    //这句话是重点*****
  <!-- 附件名称 -->
  <p>{{ item.attName }}</p>
  <!-- 附件大小 -->
  <p>{{ item.attSize }}</p>
</li>

3.引用组件

import { matchFileSuffixType } from "@/utils/commonUtil.js";
在methods中使用
methods:{
     matchFileSuffixType, //根据文件类型显示不同图片  **（不能删除）
  //根据附件名称显示不同的图片
    suffixFn(fileName) {
      let suffix = matchFileSuffixType(fileName); //fileName 文件名
      console.log(suffix);
    },
}