El-ui 解析图片为base64编码，并设置新增和编辑时图片预览

效果展示：

  新增时使用el-ui默认样式展示图片：

 编辑时使用自己img样式展示图片：

    

el-ui选取图片代码：

<el-upload
       class="upload-demo"
       action=""
       :on-change="handleChange"
       :limit="1"
       :show-file-list="showImg"
       :auto-upload="false"
       :file-list="fileList"
       list-type="picture">
       <el-button size="small" type="primary">选取图片</el-button>
</el-upload>
 <ul v-if="!showImg" class="el-upload-list el-upload-list--picture">
     <li tabindex="0" class="el-upload-list__item is-ready">
          <img :src="imgUrl" alt class="el-upload-list__item-thumbnail">
     </li>
 </ul>

所需参数：

 fileList:[],
 showImg:true,
 imgUrl:''

所需方法:

 handleChange(file, fileList) {
        //是否使用el-ui默认图片样式
        this.showImg = true;
        var This = this;
        if(!this.volidImg(file)){
            return;
        }
       
        //获取base64
        var reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = function(e){ 
           
            This.imgUrl = this.result; //图片base64编码
        }
    },
    //校验是否为图片
    volidImg(file){
     
        const isJPG = file.raw.type === 'image/jpeg';
        const isPng = file.raw.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPng) {
        this.$message.error('上传印章图片格式不符合!');
        this.fileList = [];
        }
        if (!isLt2M) {
        this.$message.error('上传印章图片大小不能超过 2MB!');
         this.fileList = [];
        }
        return (isJPG || isPng) && isLt2M;

    }