最近一个vue项目中,有个需求是, 发送消息是base64时,转换成图片预览发送出去。

输入框:

      <el-input
class="input-box"
ref="elInputText"
type="textarea"
v-model="content"
@paste.native="onPasteEvent"
@keydown.native.enter.prevent="handlerKeyupEnter"
></el-input>

设定一个 dialog 弹框。

    <!-- 图片预览dialog -->
<el-dialog
title="图片预览"
:visible.sync="previewImgObj.show"
v-if="previewImgObj.show"
append-to-body
>
<img
width="100%"
v-if="previewImgObj.imgUrl"
class="ly-margin-center"
:src="previewImgObj.imgUrl"
v-image-view
/>
<span slot="footer" class="dialog-footer">
<el-button @click="previewImgObj.show = false">取 消</el- button>
<el-button type="primary" @click="sendBase64ImgMessge">确 定</el-button>
</span>
</el-dialog>
    // 监听粘贴事件
async onPasteEvent(e) {
e.preventDefault();
let data = await addEventPasteListener(e); if (data.type === "string") {
// 复制某条消息
if (!data.string) return;
// console.log(data.string)
// 正则表达式判断data是否是base64
function validDataUrl(s) {
return validDataUrl.regex.test(s);
}
validDataUrl.regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
// 如果是base64转换成图片预览
if (validDataUrl(data.string)) {
let that = this;
function previwImg(item) {
that.previewImgObj = {
show: true,
imgUrl: item
};
}
previwImg(data.string);
}
}

效果展示:

vue项目base64转img的更多相关文章

  1. 保存头像- vue项目-base64字符串转图片

    <img :onerror="errpic" class="customerHead" :src="param.customerHead&quo ...

  2. html2canvas在Vue项目踩坑-生成图片偏移不完整

    背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...

  3. webpack搭建vue项目,实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...

  4. vue项目之webpack打包静态资源路径不准确

    摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...

  5. Vue项目中引入mockjs

    前提:创建好的vue项目 前言: 为什么引入mockjs:为了实现前后端分离,开发工作可以异步进行 其他工具:axios 一般的前后端交互过程:前端 --> ajax请求 --> 网络协议 ...

  6. vue项目使用static目录存放图片解决方案

    我个人喜欢把所有引用文件全部放在打包文件src的同级文件static文件内部,方便整合. 提醒:vue项目中正常情况下图片是由 url-loader 处理,加入了hash值,如果放到static里面w ...

  7. 百度ueditor vue项目应用 -- 图片上传源码修改

    本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...

  8. webpack 4.x 从零开始初始化一个vue项目

    创建目录 项目名称: vue-init app css reset.sass js home index.vue router index.js main.js App.vue views index ...

  9. 【Vuejs】335-(超全) Vue 项目性能优化实践指南

    点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...

随机推荐

  1. python函数参数*args **kwargs

    毕业多年,把C++都就饭吃了....今天居然在纠结什么是形参什么是实参..... 定义函数里面写的参数就是形参,因为没有内存占用,实际调用时写的参数就是实参,因为有内存占用和传值 然后就是位置参数,可 ...

  2. ATM&购物商城程序

    模拟实现一个ATM + 购物商城程序 额度15000或自定义 实现购物商城,买东西加入购物车,调用信用卡接口转账 可以体现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 提供还款接 ...

  3. MyISAM和InnoDB引擎的区别

    MySQL默认采用的是MyISAM. MyISAM不支持事务,而InnoDB支持.InnoDB的AUTOCOMMIT默认是打开的,即每条SQL语句会默认被封装成一个事务,自动提交,这样会影响速度,所以 ...

  4. npm启动报错

    npm 启动报错  event.js 160 报错原因: 端口号被占用 解决方法: 1.重新定义一个端口号. 2.任务管理器关掉node进程,重新运行npm.

  5. MaxCompute问答整理之10月

    本文是基于本人对MaxCompute产品的学习进度,再结合开发者社区里面的一些问题,进而整理成文.希望对大家有所帮助. 问题一.DataStudio中是否可以通过shell节点调取MaxCompute ...

  6. PIL库,图像处理第三方库

    PIL  ---> python imaging library 安装需要安装pillow库,包含了21种类,其中Image类是PIL最重要的一个类,可以通过它来处理图像. Python最常用的 ...

  7. 不是有效的win32应用程序

    问题描述: 用vs2012编写的程序在xp下运行提示"不是有效的win32应用程序", 改成静态编译还是会提示上面的错误 解决办法: 原来常规里面的平台工具集的设置如上,更改为下面 ...

  8. C#中Json转换主要使用的几种方法!

    这篇主要介绍2.4.第三种方法使用的比较局限,所以我没有深入学习. 第二种方法 我使用比较多的方式,这个方法是.NET内置的,使用起来比较方便 A.利用serializer获取json的泛型对象 利用 ...

  9. oninput 事件 比较angular张的 ng-model指令 和 Vue中的 v-model指令

    oninput 事件在用户输入时触发. 该事件在 <input> 或 <textarea> 元素的值发生改变时触发. 提示: 该事件类似于 onchange 事件.不同之处在于 ...

  10. Django 自定义模型管理器(Manager)及方法

    转载自:https://www.cnblogs.com/sui776265233/p/11571418.html 1.自定义管理器(Manager) 在语句Book.objects.all()中,ob ...