美文网首页Js让前端飞Web前端之路
Javascript 基础夯实 —— 通过代码构建一个包含文件的

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

作者: ac68882199a1 | 来源:发表于2017-12-10 19:48 被阅读34次

    当我们在写一个表单提交的时候,填入表单的数据会被自动序列化为一个 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 对象啦,最后再 appendformData 就可以了

    formData.append('file', base64Url2Blob(base64Url), 'imageName.png')
    
    扫码关注前端周记公众号

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/czivixtx.html