当我们在写一个表单提交的时候,填入表单的数据会被自动序列化为一个 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')
扫码关注前端周记公众号
网友评论