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,/, '')

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