Javascript 基础夯实 —— 通过代码构建一个包含文件的

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

扫码关注前端周记公众号