获取上传文件的base64

  • 利用FileReader可以读取传输的数据，包括blob对象或file对象
  • readAsDataURL是FileReader实例对象的方法，使读取结果为base64的格式

  • FileReader函数, 读取Blob,他有3个读取的方式,分别生成ArrayBuffer,base64字符串,文本（readAsDataURL生成base64）

    1. <input id="input" type="file" />
    2. <script>
    3. const input = document.querySelector('input[type=file]')
    4. input.addEventListener('change', () => {
    5.   var reader = new FileReader()
    6.   // readAsDataURL读取结果为base64   
    7.   reader.readAsDataURL(input.files[0])
    8.   reader.onload = function (e) {
    9.     console.log(e.target.result) // 该结果就是base64
    10.   }
    11. })
    12. </script>

    方式一：将base64转换为Blob对象，再将Blob对象转换为File文件

  • file对象的继承blob，

  • file对象相对于blob多了两个属性：lastModifiedDate，name
  • atob方法是window上的方法，可以将base64转换为字符串，另一个方法是btoa，将字符串转换为base64

  • Blob实例化接收两个参数，一个是数组，一个是配置对象

    • 第一个数组是：是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。
    • 第二个参数：配置对象有两个属性，type和endings
      1. // 将base64转换为blob
      2. function dataUrlToBlob(dataUrl) {
      3. let arr = dataUrl.split(',')
      4. let base64 = arr[1] // 获取base64
      5. let mime = arr[0].match(/:(.*?);/)[1] // 获取类型
      6. // 将base64转换为字符串
      7. let strBase64 = atob(base64)
      8. // 将字符串的每个字符对应的code存储起来
      9. let n = strBase64.length
      10. let u8arr = new Uint8Array(n)
      11. while (n--) {
      12. u8arr[n] = strBase64.charCodeAt(n)
      13. }
      14. // 实例Blob的参数第一个必须是一个可迭代对象
      15. return new Blob([u8arr], { type: mime })
      16. }
      17. // 将blob转换成file
      18. function blobToFile(blob, name) {
      19. return new File([blob], name, { type: blob.type })
      20. }

      方式二：将base64转换为File对象

      File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它。

  • File实例接收三个参数，第一个参数是数组，第二个参数是name，第三个参数是配置对象

    • array：一个数组，成员可以是二进制对象或字符串，表示文件的内容。
    • name：字符串，表示文件名或文件路径。
    • options：配置对象，设置实例的属性。属性包括：
      • type：字符串，表示实例对象的 MIME 类型，默认值为空字符串。
      • lastModified：时间戳，表示上次修改的时间，默认为Date.now()。
        1. // 将base64转换为File对象
        2. function dataUrlToFile(dataUrl, name) {
        3. let arr = dataUrl.split(',')
        4. let base64 = arr[1] // 获取base64
        5. let type = arr[0].match(/:(.*?);/)[1] // 获取类型
        6. // 将base64转换为字符串
        7. let strBase64 = atob(base64)
        8. // 将字符串的每一个字符的code存储起来
        9. let n = strBase64.length
        10. let u8arr = new Uint8Array(n)
        11. while (n--) {
        12. u8arr[n] = strBase64.charCodeAt(n)
        13. }
        14. // 生成file实例
        15. return new File([u8arr], name, { type })
        16. // 使用u8arr.buffer也可以，必须要用[]包裹
        17. // return new File([u8arr.buffer], name, { type })
        18. }

        测试代码

  • URL.createObjectURL 可以将一个Blob对象转换为url

    1. const input = document.querySelector('input[type=file]')
    2. const img = document.querySelector('img')
    3. var base64
    4. input.addEventListener('change', () => {
    5. var reader = new FileReader()
    6. // readAsDataURL读取结果为base64
    7. reader.readAsDataURL(input.files[0])
    8. reader.onload = function (e) {
    9.  base64 = e.target.result // 该结果就是base64
    10.  console.log(base64)
    11.  // let blob = dataUrlToBlob(base64)
    12.  // console.log(blob)
    13.  // let file = blobToFile(blob, 'hhh')
    14.  // console.log(file)
    15.  // let url = URL.createObjectURL(file)
    16.  // console.log(url)
    17.  let file = dataUrlToFile(base64, 'hhh')
    18.  console.log(file)
    19.  let url = URL.createObjectURL(file)
    20.  img.src = url
    21. }
    22. })