前端base64-file-blob之间的转换_base64转file-CSDN博客

本文链接：https://blog.csdn.net/black_cat7/article/details/120654881

本文介绍了如何在实际工作中将图片从Base64字符串转换为File对象，以及如何处理iOS兼容性问题。重点讲解了file转Base64、Base64转file的方法，包括兼容性版本，并提供了预览图片的两种途径：base64转src和使用URL.createObjectURL。

摘要由CSDN通过智能技术生成

已经有一篇博客介绍这三者的转换了，游览量挺大，可以先去看看

base64和file互转_Amy的博客-CSDN博客_base64转file以图片文件为例：应用场景工作中经常遇到需要把图片文件操作之后再上传到服务器（比如，拼接、裁剪、生成预览等），通常操作之后的图片都会变成一个 base64 的字符串，把这个字符串嵌入到 img 标签的 src 属性中就能看到图片了。正常来说也是可以把这个字符串传给服务器存储的，但是图片生成base64字符串后特别特别的长，这样存取的话非常慢。所以我们需要把它转回成文件对象再传给服...https://blog.csdn.net/sansan_7957/article/details/81951683

我们经常要对上传的图片做处理，比如涂鸦等操作，那最后图片就变成了base64数据了，虽然使用base64数据，能直接当作src来预览图片，也能直接传给后台存储，但是因为base64的长度很长，对于上传、读取时的卡顿就很明显。相较之下，使用file、blob类型来传输就好很多。

file文件转base64

  // ===================file文件转base64====================================
    file2Base64 (file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    }

使用方法：

//elementUI中，上传图片后，图片的信息数据在file.raw里，所以要传这个进去  
this.file2Base64(file.raw).then(res => {
        //res就是转换后的base64数据
         console.log(res)
  })

需要注意的是，传进来转换的file参数，是要lastModified这个字段所在的那一级，才能进行转换，因为这一级里面包含了图片的信息，才有转换的意义。

base64转file

   // =======================把base64 转换成file文件对象==================
    base642File (base64Str, fileName) {
      var arr = base64Str.split(',')
      var mime = arr[0].match(/:(.*?);/)[1] // base64解析出来的图片类型
// 对base64串进行操作，去掉url头，并转换为byte   atob为window内置方法
      var bstr = atob(arr[1]) 
      var len = bstr.length
      var ab = new ArrayBuffer(len) // 将ASCII码小于0的转换为大于0
      var u8arr = new Uint8Array(ab) //
      while (len--) {
        u8arr[len] = bstr.charCodeAt(len)
      };
// 创建新的 File 对象实例[utf-8内容，文件名称或者路径，[可选参数，type：文件中的内容mime类型]]
      return new File([u8arr], fileName, {
        type: mime
      })
    }

使用方法：

const fileData = this.base642File(base64Data, Date.now() + '.png')

这种方法，在ios10、11上会有size为0的bug，所以如果考虑兼容性的话，可以用下面的方法

兼容性的base64转file

需要两步，第一步先将base64数据转换成blob类型，再将blob类型数据转换成file类型

  // 将base64转换为blob  
    base64toBlob (dataurl) {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },

   // 将blob转换为file
    blobToFile (theBlob, fileName) {
      theBlob.lastModifiedDate = new Date()
      theBlob.name = fileName
      return theBlob
    },

  // 调用这个方法，里面会调用上面的两个方法，最终得到一个blob类型的file文件
    changeBase2File (base64Data, fileName) {
      // 调用 dataURLtoBlob 和 blobToFile 得到一个file文件类型的图片
      //! 因为base64传输给后台读取速度太慢，所以再次转成file类型传给后台存储
      const blob = this.base64toBlob(base64Data)
      const file = this.blobToFile(blob, fileName)
      return file
    },

使用方法:

 const fileData = this.changeBase2File(base64Data, Date.now() + '.png')

file、blob文件如何预览图片

base64数据能够直接作为src进行图片的渲染，但是file、blob类型的数据是没法直接渲染成图片查看的，想要预览图片，有两种方式：

1.用上面的方法，将file或者blob类型文件转成base64数据，再作为src赋值给img标签

2.使用 window.URL.createObjectURL(blob) 为blob、file 创建一个指向该参数对象的URL

接下来重点记录一下第二种方法。

URL.createObjectURL() - Web API 接口参考 | MDN (mozilla.org)https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL

传入的参数为file或者blob类型 ==》 File 对象是特殊类型的 Blob

使用方法：

const creatUrl = window.URL.createObjectURL(blob)

img.url=creatUrl

 /**
  * URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL
  * 因为：每次调用createObjectURL的时候,一个新的URL对象就被创建了
  * 如果你不再需要这个对象,要释放它,需要使用URL.revokeObjectURL()方法. 当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它.
 */
window.URL.revokeObjectURL(creatUrl)

要中这种方法，需要记得在使用完这个url后，自己去删除，虽然关闭游览器自己会清理，但是如果量大的话，还是会对网页造成卡顿。