常用文件格式通过文件名称后缀匹配图片

强身健体，清神醒脑

已于 2024-02-23 14:05:55 修改

阅读量540

点赞数

分类专栏： js 文章标签： javascript vue.js

于 2021-01-15 15:49:46 首次发布

本文链接：https://blog.csdn.net/weixin_43660626/article/details/112672444

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

代码片段

export default {
  data () {
    return {
      fileTypes: {
        imgTypes: ['png', 'jpg', 'jpeg', 'jfif', 'gif', 'PNG', 'JPG', 'JPEG', 'JFIF', 'GIF'],
        docTypes: ['doc', 'docx'],
        zipTypes: ['zip'],
        rarTypes: ['rar'],
        textTypes: ['txt'],
        pdfTypes: ['pdf'],
        excelTypes: ['xlsx', 'xls'],
        pptTypes: ['ppt', 'pptx'],
        videoTypes: ['mp4'],
        audioTypes: ['mp3']
      }
    };
  },
  methods: {
    fileIcon (fileName) {
      const keys = Object.keys(this.fileTypes);
      for (let i = 0, j = keys.length; i < j; i++) {
        for (let k = 0, l = this.fileTypes[keys[i]].length; k < l; k++) {
          if (this.fileTypes[keys[i]].some(val => fileName.includes(val))) {
            let imgUrl = '';
            switch (keys[i]) {
              case 'imgTypes':
                imgUrl = require('@/assets/imgs/png-icon.png');
                break;
              case 'docTypes':
                imgUrl = require('@/assets/imgs/doc-icon.png');
                break;
              case 'zipTypes':
                imgUrl = require('@/assets/imgs/zip-icon.png');
                break;
              case 'rarTypes':
                imgUrl = require('@/assets/imgs/rar-icon.png');
                break;
              case 'textTypes':
                imgUrl = require('@/assets/imgs/txt-icon.png');
                break;
              case 'pdfTypes':
                imgUrl = require('@/assets/imgs/pdf-icon.png');
                break;
              case 'excelTypes':
                imgUrl = require('@/assets/imgs/excel-icon.png');
                break;
              case 'pptTypes':
                imgUrl = require('@/assets/imgs/ppt-icon.png');
                break;
              case 'videoTypes':
                imgUrl = require('@/assets/imgs/video-icon.png');
                break;
              case 'audioTypes':
                imgUrl = require('@/assets/imgs/audio-icon.png');
                break;
              default:
                imgUrl = require('@/assets/imgs/doc-icon.png');
            }
            return imgUrl;
          }
        }
      }
    }
  }
};