vue实现base64图片转网络URL

src支持base64图片,正常base64图片可以直接复制到图片src,也可以将其转为URL

javascript 复制代码
// data
url: 'XXXXXXXX' // base64编码
imgUrl: '' // 图片路径

// methods
base64ImgtoFile (dataurl, filename = 'file') {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const suffix = mime.split('/')[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
    },
javascript 复制代码
const img = 'data:image/png;base64,' + img
this.file = this.base64ImgtoFile(img) // 得到File对象
this.imgUrl = window.webkitURL.createObjectURL(file) || window.URL.createObjectURL(file)
相关推荐
唐叔在学习14 小时前
insertAdjacentHTML踩坑实录:AI没搞定的问题,我给搞定啦
前端·javascript·html
超绝大帅哥14 小时前
Promise为什么比回调函数更好
前端
幸福小宝14 小时前
uniapp 异型无缝轮播图
前端
wordbaby14 小时前
TanStack Router 实战: 如何设置基础认证和受保护路由
前端
智算菩萨14 小时前
Anthropic Claude 4.5:AI分层编排的革命,成本、速度与能力的新平衡
前端·人工智能
ICT董老师14 小时前
通过kubernetes部署nginx + php网站环境
运维·nginx·云原生·容器·kubernetes·php
程序员Agions14 小时前
程序员武学修炼手册(三):融会贯通——从写好代码到架构设计
前端·程序员·强化学习
zhouzhouya14 小时前
我和TRAE的这一年:从"看不懂"到"玩得转"的AI学习进化史
前端·程序员·trae
小则又沐风a14 小时前
数据结构->链表篇
前端·html
小王和八蛋14 小时前
前端存储与离线应用实战:Cookie、LocalStorage、PWA 及 Service Worker 核心知识点
前端·javascript