vue项目base64转img方式

目录
  • base64转img方式
    • 效果展示
  • base64和jpg/png互转
    • base64的转换

base64转img方式

输入框:

      <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);
        }
     }

效果展示

base64和jpg/png互转

base64的转换

在中调用base64格式的照片

方式一

<image :src="getBase64(base64)"/>
getBase64(base64){
    var changebase64='data:image/jpg;base64,'+base64.replace(/[\r\n]/g,'')
    console.log(changebase64)
    return changebase64
   },

方式二:vue -element 在image组件中直接调用base64

    <el-table :data="devicePersonData" >
      <el-table-column label="照片">
        <template  #default="scope">
        <el-image style="width: 60px;border-radius: 6px"
                  :src="getBase64(scope.row.base64)"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        prop="name">
      </el-table-column>
      </el-table-column>
    </el-table>
 // 转换base64
getBase64 (base64) {
  return 'data:image/png;base64,' + base64
}

方式三:Element UI 中将上传的图片转换成base64

<el-upload
  class="avatar-uploader"
  action="company/update"
  :headers="headers"
  :auto-upload="false"
  :data="logoData"
  :show-file-list="false"
  :on-change="getFile">
</el-upload>
// <el-upload>组件中的on-change事件(将获取到的照片文件去转换为base64)
getFile (file, fileList) {
    //这里使用'.then()'去获取Promise的返回结果
  this.changeBase64(file.raw).then(res => {
    this.imageUrl = res
  })
},
 //将获取到的照片文件去转换为base64
changeBase64 (file) {
  return new Promise(function (resolve, reject) {
    const reader = new FileReader()
    let imgResult = ''
    reader.readAsDataURL(file)
    reader.onload = function () {
      imgResult = reader.result
    }
    reader.onerror = function (error) {
      reject(error)
    }
    reader.onloadend = function () {
      resolve(imgResult)
    }
  })
},
    // 因为转换后的base64是带头部的,如果需要去掉则可以使用replace()去替换
    const Base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA......"
       // place(serchValue:/搜索字符串/,replaceValue:'替换字符串')
    Base64.replace(/^data:image\/\w+;base64,/, '')

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 在vue中使用Base64转码的案例

    在vue项目中有时会使用到Base6464转码,现将自己使用的一种方法记录,以供参考 1:安装依赖 npm install --save js-base64 2:在main.js中引入 const Base64 = require('js-base64').Base64 new Vue({ el: '#app', Base64 }) 3:在需要转码的文件中使用 const Base64 = require('js-base64').Base64 const exStr = Base64.enco

  • Vue项目pdf(base64)转图片遇到的问题及解决方法

    公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程中遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在这个功能中遇到的问题和解决方法 要注明的是这里用到的核心插件是pdf.js,原理是动态生成canvas标签,然后通过pdf.js生成一个能渲染出pdf的对象,随后渲染每个canvas,并且生成的pdf是画面的形式,并没有pdf之类的控件 引入插件 这里很多博客都是使用Java

  • vue项目base64字符串转图片的实现代码

    <img :onerror="errpic" class="customerHead" :src="param.customerHead" alt=""> data() { return { param:{ id:"", customerHead: "", } } } let _this = this let files = e.target.files[0] if (fil

  • vue项目base64转img方式

    目录 base64转img方式 效果展示 base64和jpg/png互转 base64的转换 base64转img方式 输入框:       <el-input         class="input-box"         ref="elInputText"         type="textarea"         v-model="content"         @paste.native="

  • vue项目中引入js-base64方式

    目录 vue引入js-base64 1.安装md5依赖 2.在需要使用md5的组件中使用直接使用md5 使用Base64编码解码 1.下载包 2.在你需要解码(编码)的文件中引用 3.使用方法 vue引入js-base64 1.安装md5依赖 npm install --save js-base64 或者 cnpm install --save js-base64 2.在需要使用md5的组件中使用直接使用md5 let Base64 = require('js-base64').Base64;

  • vue项目安装使用vconsole方式

    目录 vue安装使用vconsole vue总引入vconsole 第一种:使用import的方式 第二种:通过js的方式引入,我是在app.vue中引入的 vue安装使用vconsole 1.安装 npm install vconsole --save 如果安装不成功,可选择使用cnpm cnpm安装使用淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org //cnpm -v 如果有出现版本号证明安装成功 2.

  • 详解vue项目构建与实战

    前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引入vue.js文件 (2)使用vue单文件组件 按以上两类来看,直接引入vue.js文件就像页

  • vue-cli构建vue项目的步骤详解

    构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli .前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 webpack 配置文件的基本内容,大大降低了初学者构建项目的难度.这节我们看看如何使用 vue-cli 构建 vue 项目以及对构建项目的具体分析. 一.环境搭建 node 和 npm 是必不可少的,这里不再介绍. 1.安装 vue-cli $ npm install -g vue-cli 检查是否安装成功: $ vue -

  • vue项目创建步骤及路由router

    1.创建一个vue项目步骤 (windows环境下).创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js.webpack.vue-cli).cmd打开终端. 1.1 如果还没安装node.js, 则先安装node.js,安装完成后,查看node版本 node -v 1.2 安装淘宝镜像, 安装完成后查看npm版本:npm -v npm install -g cnpm --registry=https://registry.npm.taobao.org 1.3 安装w

  • vue项目接口管理,所有接口都在apis文件夹中统一管理操作

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理 本文使用vue-cli生成的项目举例 使用接口管理之前 在项目的某个具体组件中调接口,把调用接口的方法直接写在mounted中,或在是methods中 比如: xxx.vue <template> <div id="areaTree"> <!-- 标题 --> <div

  • vue项目中锚点定位替代方式

    在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转.所以在vue项目中定义一个方法不适用锚点定位: scrollToSection() { let section = document.getElementById('section') if (section) { section.scrollIntoView() } } html标签中绑定click事件就可以了 以上这篇vue项目中锚点定位替代方式就是小编

  • Springboot项目与vue项目整合打包的实现方式

    我的环境 * JDK 1.8  * maven 3.6.0  * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等.因此在这种情况下尽量减少部署时的服务软件需求,打出的包数量也尽量少.针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发布时将前端的构建输出一起打入,最后只需部署springboot的项目即可,无需再安装nginx服务器

随机推荐