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

        }

     }

效果展示：