VUE 将图片base64编码转换为图片上传的文件流

江北彭于晏

于 2021-06-24 17:57:11 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_45062261/article/details/118193378

本文介绍如何使用JavaScript将canvas的data URL转换为文件流，通过`toDataURL`获取JPEG类型数据，然后利用`base64toFile`函数进行Base64解码并创建文件。适合前端开发者理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//使用 toDataURL方法得到了一个 数据url，data:[<mediatype>][;base64],<data>
let dataURL = canvas.toDataURL("image/jpeg");

打印dataURL 如下：

封装方法，将dataURL 转换为文件流

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
    })
},