如何使用FormData上传压缩裁剪后的图片Blob对象

在前端页面，我们通常会遇到需要用户上传图片的操作，可能还会在前端进行图片编辑的操作（比如头像的选区裁剪），然后如果图片过大的话，我们还会对图片进行压缩。这些功能我们通常通过Canvas来进行，最后使用Canvas API函数toDataURL来得到图片的Base64字符串，然后当我们要上传到后台的时候，会面临2种选择：

• 直接将图片的Base64字符串Post到后端进行处理和保存
• 在前端将Base64字符串转换成二进制的Blob对象形式，再使用常规的文件上传形式（即FormData）来将其上传到后端

第一种方式对前端来说比较简单，主要的处理逻辑在后端。而第二种的话前端的工作就稍微复杂一些。考虑到后端采用接收二进制文件的方式来处理文件上传的情况比较多，所以我们来看一下前面所说的第二种情况在前端怎么来实现，以下是主要的示例代码：

代码中值得注意的一点是下面这行代码：

formData.append("file", blob, file.name); 

如果不传第三个参数的话，生成的表单数据中，上传文件对应的filename会被设置为blob：

通常情况下这也是没问题的。但是可能由于后端使用的不同框架或自己的逻辑代码的原因，对上传的文件名做了强制的后缀名检查，会发生报错导致上传失败，遇到这种情况，请记得使用上面的方式加上第三个参数，这样问题应该就能迎刃而解了。