前端图像压缩后，后端获取的文件后缀丢失的原因和解决方法

前言

最近有一个图片压缩的需求。需要把上传的图片压缩到1M以内，不然的话后端压力太大。但是在压缩之后后端接收到的文件，filepath的文件名后缀丢了。经过很久很久的排查之后，确定了问题。所以分享给大家。以供后人参考。

解法

先说解法,解法有两种。

1. 压缩完图片之后，上传文件时进行重命名的操作。

const forms = new FormData(); // 上传图片所需
file = await handleCompressFile(file); // 图片压缩
forms.append('data', file,'a.png'); // 添加图片时重命名

2. 生成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。

目前进度

该问题已反馈给插件作者。目前的解决方案请参考上述内容即可。

排查问题不易，还请各位点点点点赞~ 另外，欢迎各位加我好友一起进步~