当有测试小姐姐陆续跟我提xxx后缀的文件无法正常上传的时候,我们可能就陷入了,怎么可能********…。
1. 直面问题
我们一开始固定的想法就是使用type来进行文件类型的判断,这是毫无疑问的,不判断类型判断个啥对吧!我后来发现这个type可能会受到多种因素的影响,导致type值在不同的地方有不同的表现,举个例子吧,就比如上传一个.zip后缀的文件,在我win10系统中的type值是application/x-zip-compressed
,而在mac系统中的type值是application/zip
,通过这个值不一样这就已经很明显了呀!而且这个type的值也有可能为空,个人猜测也可能是系统不同或者浏览器版本所致。
2. 如何处理
我们可以通过name来进行判断,因为每个文件的类型都是通过最后的xxx.xxx
来定义的,并且文件可以通过修改这个后缀来转换成其他的文件,比如搞了一张112.jpg
的文件,通过上传后获取到的是这样的:
{
name: "112.jpg",
type: "image/jpeg"
}
当你手动修改后缀名为112.pdf
后,那么这个文件上传获取到是这样:
{
name: "112.pdf",
type: "application/pdf"
}
总结:当后缀名发生改变,那么对应的type值也会发生对应的变化,那么判断type值还有啥意义了,这个时候当然是来判断name值了,js字符串有一个endsWith方法可以来判断字符串中最后的位置是否有对应字符串。
endsWidth
描述:这个方法帮助你确定一个字符串是否在另一个字符串的末尾,这个方法是大小写敏感的。
例子:
let name = 'xxx.jpg';
name.endsWidth('.jpg'); //true
MDN链接传送门