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)
相关推荐
苏打水com几秒前
第二十篇:Day58-60 前端性能优化进阶——从“能用”到“好用”(对标职场“体验优化”需求)
前端·css·vue·html·js
沛沛老爹2 分钟前
Web开发者快速上手AI Agent:基于提示工程的旅游攻略系统实战
前端·人工智能·ai·agent·react·旅游攻略
qq_172805595 分钟前
Modbus Server数据采集Web之Server端模拟功能
前端·后端·golang·modbus
LYFlied8 分钟前
【每日算法】LeetCode 739. 每日温度:从暴力遍历到单调栈的优雅解决
前端·算法·leetcode·面试·职场和发展
烛阴13 分钟前
深入 C# 字符串世界:基础语法、常用方法与高阶实战
前端·c#
这是个栗子14 分钟前
【前端知识点总结】关于基地址baseURL的介绍
前端·axios·baseurl
豆苗学前端16 分钟前
Vue 2 vs Vue 3 响应式原理深度对比(源码理解层面,吊打面试官)
前端·javascript·面试
无名修道院18 分钟前
XSS 跨站脚本攻击:3 种类型(存储型 / 反射型 / DOM 型)原理以 DVWA 靶场举例
前端·网络安全·渗透测试·代码审计·xss
代码猎人20 分钟前
CSS可继承属性和不可继承属性有哪些
前端
用户447831536023223 分钟前
基于 vue3 完成动态组件库建设
前端