React上传组件限制上传文件问题

当有测试小姐姐陆续跟我提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链接传送门

猜你喜欢

转载自blog.csdn.net/cautionHua/article/details/120343747