element UI base64格式上传图片

最新推荐文章于 2024-07-12 13:57:41 发布

不安分的魔菇

最新推荐文章于 2024-07-12 13:57:41 发布

阅读量1.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_31680159/article/details/104758765

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

element UI base64格式上传图片

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" label-position="left">
  <el-form-item label="系统logo" prop="logoPhoto">
    <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeFile"> 
      <img :src="ruleForm.logoPhoto" class="avatar">
      <el-button slot="trigger" size="small" type="primary">上传</el-button>
    </el-upload>
  </el-form-item>
</el-form>


<script>
export default {
  data() {
    return {
      imageUrl: '',
      ruleForm: {
        logoPhoto: ''
      },
    };
  },
  created () {
    getSystemConfig(this.community.communityId)  // 调用接口获取已有信息
      .then(({ data }) => {
        console.log("data,,..", data);
        // 刚开始因为没有注意到created里面这句话对ruleForm对象进行了修改，导致上传图片后界面一直不显示图片
        // this.ruleForm = data || {systemName: this.community.systemName};
        this.ruleForm.systemName = data.systemName || this.community.systemName;
        this.ruleForm.logoPhoto = data.uloge || undefined;
      })
  },
  methods: {
    // 上传图片
    changeFile(file) {
      var This = this;
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(){ 
        // this.result // 这个就是base64编码了
        This.ruleForm.logoPhoto = this.result;
        This.imageUrl = this.result.substring(23);
      }
    },
  },
}
</script>