vue根據(jù)文件地址，獲取后綴，根據(jù)后綴判斷類型，然后根據(jù)類型動態(tài)展示不同類型的照片

1、處理后綴，根據(jù)后綴判斷類型?

    matchType (fileName) {
      // 后綴獲取
      var suffix = ''
      // 獲取類型結(jié)果
      var result = ''
      try {
        var flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      // 圖片格式
      var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
      // 進行圖片匹配
      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;
      };
      // 匹配 excel
      var excelist = ['xls', 'xlsx'];
      result = excelist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = 'excel';
        return result;
      };
      // 匹配 word
      var wordlist = ['doc', 'docx'];
      result = wordlist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = 'word';
        return result;
      };
      // 匹配 pdf
      var pdflist = ['pdf'];
      result = pdflist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = 'pdf';
        return result;
      };
      // 匹配 ppt
      var pptlist = ['ppt'];
      result = pptlist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = 'ppt';
        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、根據(jù)返回的結(jié)果，直接將文件名命名為返回的結(jié)果，比如我有個圖片類型的文件，經(jīng)過上述的方法，返回的是image，那我直接要顯示的圖片名稱就為image,然后動態(tài)引入圖片

<div v-for="(item,index) in imgList">
   <img
     class="file_img"
     :src="require(`@/assets/images/fileType/${matchType(item.fileName)}.png`)"
     alt=""
   />
</div>

完整代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-741503.html

<template>
  <div class="box">
    <div v-for="(item,index) in imgList">
      <img
        class="file_img"
        :src="require(`@/assets/images/fileType/${matchType(item.fileName)}.png`)"
        alt=""
      />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgList: [
        {
          id:1,
          fileName:'test.png'
        },
        {
          id:2,
          fileName:'test.xlsx'
        },
        {
          id:3,
          fileName:'test.docx'
        }
      ]
    };
  },
  methods: {
    matchType (fileName) {
      // 后綴獲取
      var suffix = ''
      // 獲取類型結(jié)果
      var result = ''
      try {
        var flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      // 圖片格式
      var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
      // 進行圖片匹配
      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;
      };
      // 匹配 excel
      var excelist = ['xls', 'xlsx'];
      result = excelist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = 'excel';
        return result;
      };
      // 匹配 word
      var wordlist = ['doc', 'docx'];
      result = wordlist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = 'word';
        return result;
      };
      // 匹配 pdf
      var pdflist = ['pdf'];
      result = pdflist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = 'pdf';
        return result;
      };
      // 匹配 ppt
      var pptlist = ['ppt'];
      result = pptlist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = 'ppt';
        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;
    },
  },
  mounted () {}
};
</script>
<style>
</style>

到了這里，關于vue項目中，動態(tài)src引入圖片，并且js根據(jù)文件名后綴，判斷文件圖片、視頻、文檔、pdf等類型的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！