JavaScript学习日志之Base64数据转二进制文件链接

最近项目遇到视频预览需求后端使用Base64返回视频文件的问题（大为震撼），顺手整理下前端如何处理把Base64转为二进制文件链接，提供给Video标签的src属性播放。

对Base64的处理已经封装成了一个函数。首先需要使用atob将base64转换为Unicode字符串，然后利用遍历将Unicode字符串转换成二进制数据。

function base64toBlob(base64) {
    let bstr = atob(base64) // 获得base64解码后的字符串
    let n = bstr.length
    let u8arr = new Uint8Array(n) // 新建一个8位的整数类型数组，用来存放ASCII编码的字符串
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n) // 转换编码后才使用charCodeAt 找到Unicode编码
    }
    return u8arr
}

获得二进制数据后，还需要将其转换为文件流，需要构建Blob对象并在type中指定其Content-Type，这里是mp4格式的视频，所以为video/mpeg4。

let data = base64toBlob(res)
let blob = new Blob([data], { type: 'video/mpeg4' })

最后，通过createObjectURL可以将blob文件流转换为链接，将结果直接赋值给video的src属性即可播放。

let url = URL.createObjectURL(blob)

使用结束后，你或许需要释放这个文件链接，可以使用如下的方式解决

URL.revokeObjectURL(src)