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

效果展示：