当我们在写一个表单提交的时候，填入表单的数据会被自动序列化为一个 FormData 对象，再 post 到后台接口
我们也经常会碰到上传文件或图片的需求，不管是自己撸还是用第三方库，最终都是通过一个 <input type="file"> 的标签来完成文件的选择操作，然后还是包装成了一个 FormData 对象发送到后台，但这里发送的却是原始的文件，而我们往往需要对图片进行压缩等操作
由于 FormData 的字段值的类型只能是字符串、File 或 Blob，如果类型不是这三种，就会被自动转为字符串。那我们在对 input 选择的图片进行压缩处理后（本文以图片为例），又该怎么将压缩后的图片转为一个可以放进 FormData 的类型呢？
如何向 FormData 添加字段
const formData = new FormData()
formData.append('name', 'test')
在上面的代码中，通过append方法向formData中添加了一个字段名为'name'的值'test'
append方法也可以接受第三个参数，当类型为 File 或 Blob 时，第三个参数为该文件的文件名，如果不传则默认为 'blob'
如果想要删除某个字段，则可以用delete方法
需要注意的是，如果在控制台上打印formData的话，我们是看不到它里面的具体字段的，如果想要查看，则可以通过以下几个方法：
formData.entries()
该方法会返回一个迭代器，通过迭代器的 next() 方法，会返回每一次迭代到的字段名与值组成的一个数组
formData.forEach()
该方法与数组的 forEach() 使用方法类似，接受一个回调函数，回调的第一个参数是当前遍历到的值，第二个参数为当前遍历的字段名
formData.keys()
与 entries() 类似都返回迭代器对象，但是调用 next() 后只返回字段名
formData.values()
与 entries() 类似都返回迭代器对象，但是调用 next() 后只返回值
将压缩后的图片转为 Blob 对象
Blob 对象就是二进制大对象，FormData 中添加的 File 对象最终也是通过二进制的形式进行传输的，所以我们可以直接将图片转为 Blob
一般来说前端压缩图片都是通过 canvas 进行的，再将 canvas 的内容读取为一个 base64 的 url，这个 url 在浏览器中可以直接显示一张图片，所以要将压缩后的图片转为 Blob，其实就是将 base64 的 url 转为 Blob
function base64Url2Blob (url) {
// 将base64url通过 , 分割为含有两个元素的数组
const temp = url.split(',')
// 将图片的base64编码数据解码
const bytes = window.atob(temp[1])
// 匹配图片的 mime
const mime = temp[0].match(/:(.*?);/)[1]
// 创建一个类型化数组，该数组的长度与解码后的图片数据长度相同
let ia = new Uint8Array(bytes.length)
// 变量图片数据的每一位，并将每一位的 Unicode 编码存入类型化数组
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i)
}
// 通过类型化数组创建一个 Blob 对象
return new Blob([ia], {type: mime})
}
通过上面的代码就可以将一个经过压缩的 base64 的图片转为 Blob 对象啦，最后再 append 到 formData 就可以了
formData.append('file', base64Url2Blob(base64Url), 'imageName.png')
扫码关注前端周记公众号
网友评论