动态使用绑定图片源展示base64格式的图片

前言

用户上传图片,利用后端返回的数据实现图片展示,
实现效果:


实现代码:

<el-form-item label="印章:" prop="imgFile">
   <el-upload
     class="upload-demo"
      drag
      v-model="addForm.imgFile"
      action=""
      :before-upload="handleBeforeUpload"
      :http-request="handleUpload"         
      accept=".jpg,.png"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过2kb</div>
    </el-upload>         
  </el-form-item>

 <div v-if="item.prop === 'images' && scope.row[item.prop] !== null">
    <img :src="'data:image/jpg;base64,' + scope.row[item.prop]" alt="印章">              
 </div>
 <span v-else>{{ scope.row[item.prop] }}</span>

<script>
data () {
    return{
    addForm: {
        imgFile: ''
    }
},

handleBeforeUpload (file) {
      if (file.size > 2 * 1024) {
        this.$message({
          type: 'warning',
          message: '选择文件过大啦~~'
        })
        return false
      }
    },
handleUpload (data) {
  this.addForm.imgFile = data.file
}
</script>