最近有一个图片压缩的需求。需要把上传的图片压缩到1M以内，不然的话后端压力太大。但是在压缩之后后端接收到的文件，
filepath
的文件名后缀丢了。经过很久很久的排查之后，确定了问题。所以分享给大家。以供后人参考。
先说解法,解法有两种。
压缩完图片之后，上传文件时进行重命名的操作。
const forms = new FormData();
file = await handleCompressFile(file);
forms.append('data', file,'a.png');
生成blob的时候，转换成file，并重命名
file = await handleCompressFile(file)
file = new window.File([blob],'a.png')
图片压缩的插件网上一搜一大堆，笔者使用的 browser-image-compression 。可以支持压缩图片的尺寸和大小。这里推荐一手。 www.npmjs.com/package/bro…
通过解法各位大概也猜到原因了，没错，是因为图片压缩之后的名字问题导致的。
笔者看了一下现在市面上的大部分都图片压缩插件。发现使用的其实都是同一个思路。即把图片文件转成canvas然后进行压缩并重新生成blob。
问题就在重新生成blob上。拿笔者使用的插件来举例。插件作者在进行压缩的时候已经考虑到了信息的完整性。所以尽量保证压缩之后的内容和压缩前的属性一样。
上传一个图片并压缩之后，我们在前端看到的是我们压缩了并保证了所有属性均未改变
其实后端收到的信息是
未压缩之前后端收到的消息是：
可以看到，尽管我们的属性在前端层次上已经做到了完美复刻。但对于服务端来说，他们接受到的属性其实仍旧有所区别。比如我们的 filename和 filepath. 主要原因是因为，我们生成的blob文件会默认filename名字为blob。而filepath又是根据filepath来生成的。这就导致了，现在网上的内容在生成之后都会缺失后缀名。
如果你的公司后端进行类型校验的时候又因为各种各样的技术宅，恰好需要依照filepath来进行后缀名判断。那么就会当场gg。
该问题已反馈给插件作者。目前的解决方案请参考上述内容即可。
排查问题不易，还请各位点点点点赞~ 另外，欢迎各位加我好友一起进步~
