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

效果展示：