lyrieek
lyrieek
6月前 · 4 人阅读 · 文章来源: 简书

当我们在写一个表单提交的时候,填入表单的数据会被自动序列化为一个 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

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 对象啦,最后再 appendformData 就可以了

formData.append('file', base64Url2Blob(base64Url), 'imageName.png')
收藏 0
关键词: formdata blob 图片 formdata appe
评论