Base64转图片和图片转Base64

<template>
     <view>
         <view  class="imgtext">
             <image :src="imgusr" mode=""></image>
         </view>
         <view class="btn">
           <button @click="uploadimg"  style="background-color: #8A6DE9;" type="default">上传图片</button>
         </view>
         <view  class="btn">
           <button @click="pathTobase64img"  style="background-color: #DD524D;" type="default">转换为base64路径</button>
         </view>
          <view class="btn">
             <button  @click="base64Topathimg" style="background-color: #09BB07;" type="default">由base64转换为phth路径</button>
          </view>
         <view  class="imgphth">
           <textarea :value="imgPth" disabled    placeholder="" />
            
         </view>
        
     </view>
</template>

<script>
     import { pathToBase64, base64ToPath } from '@/common/index.js'
     
    export  default{
      
      data(){
         return{
            imgusr:"",
            imgPth:"",
            content:""
         } 
      },
      onLoad() {
        
        
     var   base64='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAqNJREFUaN7tWMtu1DAULeL1B2XBCgRL3j8APwBLxIblsCqbfkAH/qAJsROGne2CsuiyXY5gTVsJluUfAIlHRRkN9ySdiTMMtZ3JJIzqK1mKZnJ9z/E9vnbu0pI3b968Lbxxnl4MIvV4PRJd0wi5WsO78PkvwK/H6kHAxE8CN3Qb8kfIxP12wTN1h4AcuoMfkzh8kYjbrYBPkvdng0h+GIE5eu5aDSY+6n5pmp5rnEDA5DNtNb8xpi7b+uJd+BT+6nmz4OM3N0j3v8YAmFxxl59c0aUU8Ne3agfa7/fPQKOk9Y4ugSAS+2 ';
     
    var   url='MJMPluOByecp0bPgT8bTGP+FSWGcWkPQYMlcAztnGdAuyZKkkcq6tVFyh6lV4h4N8NMfaAxRk8rfLBcRPT5vtK2r03a5ZDLu7mcx0XSxxYk0DKJlb+M1WNpHQQxeIR55vL9R2Em8uYE3NrlSrJYmuZsJJTXtsL8GEvveQKqNfbuBBG8mHA5SoGnvGbc3YodokEYbMh0CkcROJUnaiSULq3yXcwRQoD/Be9VDfdqlWWiVxKXDwxO+QpHAXt2oNXT6ki/TadvngH71oTcMVThQAA/QUykjvZ6tHA8yQ5WxJzJ5DJRgOHq8G0QymXl3b1yDJhPrzmTyDXfAF+a+v8P9+l/8r3J7HdKgFUltGGtV3RiYwNTNVprgRQHrXV37He8NgfR36YozUCqPFVSm65NMpVT+DESmjhN/HCl9FZDzKbe5G/SpyIy5zLddr1471RAnV/0LRGoNbunzOBGb7I5tO+LE5tYDM6ZH2gYsN9cem41W2IDQwjPFZ91DRNTwdM7Ook9K5EYwPlVwMPTMBm1w1I5DVTX6jJASzA5NbSAAktE62BJwzO4HU5TeuNNiMh1UFsa9l48+bNm7cq9gfmr6wmxprr4wAAAABJRU5ErkJggg==';
      	 
         base64+=url;
          
         
      		//item为base64码
      		 
          base64ToPath(base64)
            .then(path => {
              this.imgusr=path;
               this.imgPth=path;
              console.log(path);
            })
            .catch(error => {
              console.error(error)
            })
    var   path=this.imgusr;
    console.log(path);
            pathToBase64(path)
              .then(base64 => {
                
                console.log(base64)
              })
              .catch(error => {
                console.error(error)
              })

      },
      methods:{
        uploadimg(){//上传图片
          uni.chooseImage({
            count:1,
            success: (data) => {
              console.log(data.tempFilePaths[0]);
              this.imgPth=data.tempFilePaths[0];
              this.imgusr=data.tempFilePaths[0];
            }
          })
        },
        pathTobase64img(){//转换图片路径
          
          pathToBase64(this.imgusr)
            .then(base64 => {
              this.imgPth=base64;
              console.log(base64)
            })
            .catch(error => {
              console.error(error)
            })
          
          
        },
        base64Topathimg(){
          
          pathToBase64(this.imgusr)
            .then(base64 => { 
              base64ToPath(base64)
                .then(path => {
                   this.imgPth=path;
                  console.log(path);
                })
                .catch(error => {
                  console.error(error)
                })
            })
            .catch(error => {
              console.error(error)
            })
          
           
        }
        
        
      }
      
    }
    
    
   						 
</script>

<style>
  .base64Topath{
    width: 50px;
    height: 50px;
    background-size: 100%,100%;
  }
  .btn{
    display: flex;
  }
  .btn  button{
    width: 200px;
    height: 40px;
    font-size: 10px;
    line-height: 40px;
    margin-left: 10px;
    margin: auto;
    margin-top: 20px;
  }
  .imgtext{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: auto;
  }
  .imgtext  image{
    width: 200px;
    height: 200px;
     background-size: 100%,100%;
    
  }
  .imgphth{
     color: #000000;
     font-family: '微软雅黑';
     font-size: 15px;
     font-weight: 500;
      margin: auto; 
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      justify-content: center;
  }
  .imgphth  textarea{
    display: inline-block;
    width: 90%;
    height: 300px;
    padding: 10px;
  }
</style>

效果图如下：

js:

https://download.csdn.net/download/weixin_45932157/16729687