使用js将base64编码的图片转换成上传时的文件流

js将base64转换为上传文件的文件流

今天开发中遇见一个有意思的问题,由于使用html2canvas和jsPDF这两个插件将html转化为pdf文件,但是需要将生成的pdf文件上传给后端,然而pdf.output(‘dataurlstring’)返回的结果为base64编码,无法成功上传.所以就需要将base64编码转化为可以上传的文件流.

pdf.output(‘dataurlstring’)返回结果

打印的base64编码如下

核心转化方法

function base64toFile (dataurl, filename = 'file') {
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let suffix = mime.split('/')[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
    })
}

文件上传方法

整体调用

upload(base64toFile(dataurl, filename = 'file'))

参考学习于https://blog.csdn.net/gc_89757/article/details/90549405