base64和file互转

应用场景

工作中经常遇到需要把图片文件操作之后再上传到服务器（比如，压缩、旋转、拼接、裁剪、生成预览、canvas等），通常操作之后的图片都会变成一个 base64 编码的字符串，把这个字符串嵌入到 img 标签的 src 属性中就能看到图片了。

正常来说也是可以把这个字符串传给服务器存储的，但是图片生成base64字符串后特别特别的长，这样存取的话非常慢。

所以我们需要把它转回成文件对象再传给服务器，这样就能得到一个图片的链接了。

• 文件(File) 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

正常我们通过 <input type="file"/>上传图片得到的file对象是这样的：

• Data URLs，即前缀为 data: 协议的的URL，其允许内容创建者向文档中嵌入小文件。

通过base64编码之后是这样的：

• Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

转换成blob再传给服务器就可以了，图片信息都在里面呢

转换方法

百度搜很多，这里贴一个

base64 转 blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.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 });
}

blob 转 base64

function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}

---

2021-08-11 更新

问题描述：上传图片前先压缩（将图片转 base64 再转 file ）在 ios10/11 上能够成功上传到阿里云 OSS，但是 size 为 0KB（上传 oss 使用的接口方式）。

问题原因：兼容问题

问题解决：base64 转 File

有兼容问题 new File([u8arr], filename, { type: mime })

// 将base64转换为文件
function dataURLtoFile(dataurl, filename) {
  let arr = dataurl.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 File([u8arr], filename, { type: mime });
}
 
//调用
let file = dataURLtoFile(base64Data, imgName);

无兼容问题 new Blob([u8arr], { type: mime })

// 将base64转换为blob
function dataURLtoBlob(dataurl) {
  let arr = dataurl.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 });
}
// 将blob转换为file
function blobToFile(theBlob, fileName) {
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
}
// 调用
let blob = dataURLtoBlob(base64Data);
let file = blobToFile(blob, imgName);