在实际工作中经常会涉及到前端层面的文件转换，例如图片上传、PDF 预览等操作。目前产品的图片上传是通过 form 表单传送二进制数据来完成的，接收一般也是二进制数据。但是二进制数据无法使用所以需要对数据进行相应的处理。

一、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/file 转为 base64

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

本人建议使用 promise 来完成，暂只有一个例子，其余方法也可使用 promise 的方式去完成：

new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result);
        };
        // readAsDataURL
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error("blobToBase64 error"));
        };
      }).then((res) => {
        // 转化后的base64
        console.log("base64", res);
        this.logoSrc = res;
      });

三、base64 转换为 file

function dataURLtoFile(dataurl, filename) {//将base64转换为文件
        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 File([u8arr], filename, {type:mime});
}

四、图片转换为 base64

function getImgToBase64(url,callback){//将图片转换为Base64
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}

五、arrayBuffer 转 Base64

function arrayBufferToBase64(buffer) {
        var binary = "";
        var bytes = new Uint8Array(buffer);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
      }

六、file 转 src

let src = URL.createObjectURL(file);

七、arrayBuffer 转 file

第一个参数是一个可能为ArrayBuffer、ArrayBufferView、Blob或者DOMString对象的数组，第二个参数表示文件名称.

let file = new File(arrayBuffer,fileName);

八、file 转 arrayBuffer

FileReader 的实例方法readAsArrayBuffer可以读取指定的 Blob 或 File 内容，在文件读取完毕后会触发 loadend 事件，我们可以在回调里面拿到读取后的 arrayBuffer

function fileToBuffer(file, callback){
    let fr = new FileReader();
    let filename = file.name;

    fr.readAsArrayBuffer(file);
    fr.addEventListener("loadend",(e) => {
        let buf = e.target.result;
        callback(buf, filename);
    },false);
}

九、arrayBuffer 转 Blob

第一个参数是一个由 ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的数组,
第二个参数是 Blob 对象的 type 属性，默认值为 “”，它代表了将会被放入到 blob 中的数组内容的MIME类型

let blob = new Blob([buf], { type: mimeType });

十、Blob 转 arrayBuffer

FileReader 的实例方法readAsArrayBuffer除了读取file外还可以读取blob, 所以使用方法和第八条一样，只是参数变成了 blob.

function blobToBuffer(file, callback){
    let fr = new FileReader();
    let filename = file.name;

    fr.readAsArrayBuffer(blob);
    fr.addEventListener("loadend",(e) => {
        let buf = e.target.result;
        callback(buf, filename);
    },false);
}