在前端开发中，我们经常需要判断文件类型并返回相应的状态，以便在页面中展示相应的图标。本文将介绍一种根据文件类型返回相应状态的方法。
该方法使用了一个 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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/144783.html
