Blob 对象表示一个不可变、原始数据的类文件对象。

File 对象是特殊类型的Blob，继承了Blob的功能并将其扩展使其支持用户系统上的文件

File对象来源有

• <input type="file"> 元素上选择文件后返回的FileList对象
• 拖放生成的DataTransfer对象
• canvas元素上执行mozGetAsFile()方法后返回结果

FileReader对象读取文件

FileReader来读取 File 或 Blob 对象指定的文件或数据

var fileReader = new FileReader();
fileReader.onload = function (e) {
    target.src = e.target.result
};
fileReader.readAsDataURL(file);

• readAsArrayBuffer：result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象
• readAsBinaryString：result属性中将包含所读取文件的原始二进制数据
• readerDataURL：result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容，如data:image/jpeg;base64,/....
• readerText：result属性中将包含一个字符串以表示所读取的文件内容

应用场景

图片base64转Blob

function dataURLtoBlob(dataURL) {
    //去掉url的头，并转换为byte 
    let arr = dataURL.split(',');
    let bytes = atob(arr[1]);
    let mime = arr[0].split(':')[1].split(';')[0];
    
    //处理异常,将ascii码小于0的转换为大于0  
    let ab = new ArrayBuffer(bytes.length);
    let u8arr = new Uint8Array(ab);
    
    for(let i = 0; i<bytes.length; i++) {
        u8arr[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], { type: mime });
}

图片base64转File

function dataURLtoFile (dataURL, fileName) {
    let arr = dataURL.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bytes = atob(arr[1]);
    let n = bytes.length;
    let u8arr = new Uint8Array(n);
    
    while (n--) {
        u8arr[n] = bytes.charCodeAt(n);
    }
    return new File([u8arr], fileName, {type: mime});
}

File或Blob转成base64

function previewImage(target, file) {
    try {
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            console.log(e.target.result);
            target.src = e.target.result;
        };
        fileReader.readAsDataURL(file);
    } catch (e) {
        throw new Error('browser doest not support FileReader')
    }
}

图片URL转base64

function imgURLToBase64(url) {
    return new Promise(function (resovle, reject) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            var reader = new FileReader();
            reader.onload = function () {
                if (!(/^data:image/i).test(reader.result)) {
                    reject('图片地址转换base64失败');
                } else {
                    resovle(reader.result);
                }
            }
            reader.error = function (error) {
                reject('图片地址转换base64失败');
            }
            reader.readAsDataURL(xhr.response);
        };
        xhr.error = function (error) {
            reject(error);
        }
        xhr.open('GET', url);
        xhr.responseType  = 'blob'
        xhr.send();
    });
}

图片预览

<img id="preview" src="" />
<input type="file" id="select" accept="iamge/png,iamge/jpeg,image/jpg" />
var preview = document.getElementById('preview'),
    select = document.getElementById('select');

select.addEventListener('change', function fileInput (e) {
    if (!this.files.length) return
    var file = this.files[0];
    previewImage(preview, file);
}, false);

方式一：
function previewImage (target, file) {
    try {
        var src = window.URL.createObjectURL(file);
        target.onload = function () {
            window.URL.revokeObjectURL(this.src);
        };
        target.src = src;
    } catch (e) {
        throw new Error('browser doest not support URL')
    }
}
方式二：File或Blob转成base64

方式二优化版：
function previewImage (c, file) {
    var reader = new FileReader;
    reader.onload = function(e) {
        var canvas = document.createElement('canvas'),
         	context = canvas.getContext('2d'),
        	img = new Image();
        	
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            context.drawImage(img, 0, 0, img.width, img.height);
            file.thumb = canvas.toDataURL();
            file.data = img.src;
            //todo preview
        }
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);
}