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