Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取

简介: Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取

有的时候,我们可能想要提取data:image/png;base64,后面的内容

参考资料:

Vue 用“,”分割,遍历数组_vue以第一个数字分割-CSDN博客

先定义数组,定义一个数组将字符串切割的内容给装进去

具体代码:

<template>
  <h2>复制或剪切图片后以ctrl + V 粘贴</h2>
   <img id="img" src="" alt="">
</template>
 
<script>
export default {
  methods: {
    setPasteImg(){
            //粘贴事件
            document.addEventListener('paste', function(event){
                if (event.clipboardData || event.originalEvent) {
                    var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                    if(clipboardData.items){
                        var  blob;
                        for (var i = 0; i < clipboardData.items.length; i++) {
                            if (clipboardData.items[i].type.indexOf("image") !== -1) {
                                blob = clipboardData.items[i].getAsFile();
                            }
                        }
                        var render = new FileReader();
                        render.onload = function (evt) {
                            //输出base64编码
                            var base64 = evt.target.result;
                            // console.log(base64);
                            // arr = base64.split(',');
                            // console.log(base64);
                            console.log(base64.split(','));
                            var imgArr = [];
                            imgArr = base64.split(',')
                            console.log(imgArr[0]);
                            console.log(imgArr[1])
                            // var imgArr = [];
                            // imgArr = base64.split(',')
                            // console.log(imgArr[0]);
                            // console.log(array[0]);
                            document.getElementById('img').setAttribute('src',base64);
                        }
                        render.readAsDataURL(blob);
                    }
 
                }
 
            })
        }
  },
  mounted(){
    this.setPasteImg()
  }
}
</script>
 
<style>
      #img{
            width: 800px;
            box-shadow: 0 0 5px blue;
        }
</style>

效果:前后字段分开


相关文章
|
1天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
7 1
|
2天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
2天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
2天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
|
1天前
|
JavaScript 前端开发 开发工具
如何学习vue框架
【7月更文挑战第5天】 - 先学HTML/CSS/JS基础和前端工程化工具(npm, webpack, Git)。 - 从Vue官方文档学习基础,包括指令、组件、响应式系统。 - 深入研究Vue Router和Vuex,掌握路由管理和状态管理。 - 学习自定义指令和Mixins,优化性能技巧。 - 实战项目练习,加入Vue社区,阅读相关资源,提升技能。 - 关注Vue生态,持续实践和创新,以适应不断发展的框架。
5 0
|
2天前
|
缓存 JavaScript 算法
vue 性能优化
vue 性能优化
11 0
|
2天前
|
JavaScript 前端开发 程序员
Vue组件化、单文件组件以及使用vue-cli(脚手架)
Vue组件化、单文件组件以及使用vue-cli(脚手架)
13 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1008 0
|
2天前
|
JavaScript 区块链
vue 自定义网页图标 favicon.ico 和 网页标题
vue 自定义网页图标 favicon.ico 和 网页标题
10 1
|
3天前
|
存储 JavaScript 数据安全/隐私保护
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
12 1