在前端开发中，我们经常需要判断文件类型并返回相应的状态，以便在页面中展示相应的图标。本文将介绍一种根据文件类型返回相应状态的方法。
该方法使用了一个 fileType(text) 函数，该函数接收一个字符串类型的参数 text，表示文件的路径或名称，然后根据不同的文件类型返回相应的状态。具体实现如下：
// 文件类型判断 fileType(text) { if (text) { let file = this.$uti.typeFile(text) const map = [ [ () => file.includes('pdf'), () => '/static/wordIcon/pdf.png' ], [ () => ['docx', 'doc'].includes(file), () => '/static/wordIcon/word.png' ], [ () => ['xlsx', 'xls'].includes(file), () => '/static/wordIcon/excel.png' ], [ () => ['mp4', 'MP4', 'MOV'].includes(file), () => '/static/wordIcon/mps.png' ], [ () => file.includes('mp3'), () => '/static/wordIcon/mpmus.png' ], [ () => ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF'].includes(file), () => '/static/wordIcon/photo.png' ], [ () => file.includes('pdf'), () => '/static/wordIcon/pdf.png' ] ] const target = map.find(m => m[0]()) if (target) { return target[1]() } else { return '/static/wordIcon/wenjian.png' } } },
该函数首先判断传入的参数 text 是否为空，如果不为空，则通过 this.typeFile(text) 方法获取文件名的后缀名并保存在变量 file 中。
接下来，使用了一个 map 数组来保存不同类型文件的判断条件和对应的返回值。每个元素都是一个长度为 2 的数组，第一个元素是一个函数，用于判断文件类型是否符合条件；第二个元素是一个函数，用于返回相应的状态。
最后，使用了 array.find() 方法在 map 数组中查找符合条件的元素，并返回对应的状态。如果没有找到符合条件的元素，则返回默认的状态 '/static/wordIcon/wenjian.png'。
调用该函数的示例代码如下：
this.fileType('http://xxxxxxxxx.com:19000/workfile/buMen_1681280445369.png')
图片根据业务需求自己更换
以上就是本文介绍的根据文件类型返回相应状态的方法，希望能对大家的开发工作有所帮助。
作者：Emo_TT
