input文件格式识别和v-for图片路径不识别的问题（三）

原创于 2019-09-10 14:24:03 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #input #file

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种根据上传文件的后缀名来识别文件格式，并据此显示相应图标的方法。首先，利用JavaScript的lastIndexOf和slice方法提取文件名中的后缀。然后，根据不同的后缀名显示对应的图标，如Excel文件显示Excel图标。特别注意，图片路径需使用require导入，以确保在项目中正确加载。

这篇文章讲讲如何通过文件名来区分为上传的文件显示不同图片的方法：

第一步，根据上传文件的后缀名来判断文件格式

e.target.files[0].name.slice(e.target.files[0].name.lastIndexOf('.') + 1)

spring.lastIndexOf('.')方法返回该字符串最后一次出现在字符中的位置；

spring.slice()方法字符串返回指定位置的字符

之后就取到了最后一个.之后的所有字符，然后根据后缀来判断上传文件的格式，显示不同的图片。

第二步，根据不同的文件格式显示不同的图片

src: e.target.files[i].name.slice(e.target.files[i].name.lastIndexOf('.') + 1) == 'xls'? require('../../../../static/images/excel.png') : readList[i].result,

这里有一点需要注意的是，在JS中直接使用../../是无法识别到图片的，需配合require来导入图片，才可正常显示。