zoukankan      html  css  js  c++  java
  • vue项目base64转img

     最近一个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);
            }
         }

    效果展示:

     

  • 相关阅读:
    国外保健品品牌介绍
    海淘第一单
    表查询语句与方法
    表与表关系
    表完整性约束
    表字段数据类型
    存储引擎
    数据库之MySQL基本操作
    MAC重置MySQL root 密码
    进程池、线程池、协程
  • 原文地址:https://www.cnblogs.com/lpp-11-15/p/11445521.html
Copyright © 2011-2022 走看看