本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单 进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

在做前端项目的时候，遇到图片的上传或者下载时，不可避免的会遇到Blob、File、Base64三种类型的转换。那么今天就总结下，三者之间的相互转换。

首先我们看看base64 ，File 对象，Blob 对象长什么样的，怎么来的。

base64 ： 可以直接当作链接地址使用

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....

File 对象：

File{
    lastModified: 1649490762164
    lastModifiedDate: Sat Apr 09 2022 15:52:42 GMT+0800 (GMT+08:00) {}
    name: "1649490762160-251.png"
    size: 25748
    type: "image/png"
    webkitRelativePath: ""
    [[Prototype]]: File
 
Blob 对象
Blob{
    size: 25748
    type: "image/png"
    [[Prototype]]: Blob
 
blob链接
blob:url/22ec44b8-5864-4960-8ea8-a71a7e40bb63
base64 转 Blob 对象
//base64 转 Blob对象
/* base64: data:image/png;base64,iVB....
/* Blob：{...}
function base64ToBlob(data) {
    var arr = data.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    return new Blob([u8arr], { type: mime });
base64 转 File 对象
/** base64 转 File 对象
  /* @param data base64
  /* @param filename 自定义文件名
  /* @return File 对象
  function base64ToFile(data, filename) {
      var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      let suffixArr = mime.split("/")
      if (suffixArr.length && !filename) {
          let suffix = suffixArr[suffixArr.length - 1]
          filename = new Date().getTime() + "-" + Math.floor((Math.random() * 10000)) + "." + suffix
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      return new File([u8arr], filename, { type: mime });
File 对象，Blob 对象 转base64
//blob ,File 对象 转 base64
function blobFileTobase64(blobFile) {
    let reader = new FileReader()
    reader.readAsDataURL(blobFile);
    return new Promise((resolve, reject) => {
        reader.onload = function () {
            resolve(this.result)
        reader.onerror = (err) => {
            reject(err);
blob链接转 base64 :
利用canvas.toDataURL的API转化成base64
function urlToBase64(url, type = "image/png") {
    return new Promise((resolve, reject) => {
        let img = new Image()
        img.src = url
        img.onload = function () {
            let canvas = document.createElement("canvas")
            canvas.width = this.naturalWidth
            canvas.height = this.naturalHeight
            let ctx = canvas.getContext("2d")
            ctx.drawImage(img, 0, 0)
            let result = canvas.toDataURL(type || 'image/png')
            resolve(result)
        img.onerror = function (err) {
            reject(err)