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)
相关推荐
星辰徐哥5 分钟前
5G的行业应用:工业互联网、车联网、智慧医疗中的网络支撑
网络·5g·php
华科易迅12 分钟前
Vue如何集成封装Axios
前端·javascript·vue.js
康一夏13 分钟前
Next.js 13变化有多大?
前端·react·nextjs
糖炒栗子032614 分钟前
前端项目标准环境搭建与启动
前端
不是az14 分钟前
CSS知识点记录
前端·javascript·css
爱分享的阿Q23 分钟前
GPT6-Spud-AGI前夜的豪赌
前端·easyui·agi
西西小飞龙1 小时前
Less/Sass Mixins vs. Extend
前端·less·sass
syjy21 小时前
(含下载)BeTheme WordPress主题使用教程
前端·wordpress·wordpress建站
三道渊1 小时前
进程通信与网络协议
开发语言·数据库·php
Misnice1 小时前
shadcn如何使用
前端·reactjs