<div class="layui-inline">
  <img v-if="poster.length>0" :src="poster" width="40" height="40" />
  <el-upload
    class="upload-demo"
    ref="upload"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-change="onFileSelected"
    :auto-upload="false"
    :multiple="false"
    :with-credentials="true"
    :show-file-list="false"
    accept="image/*"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</div>

// vue js 代码片段
data(){
  return {
    poster:""
  }
}
methods:{
    onFileSelected(file, filelist) {
      const isIMAGE =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isIMAGE) {
        this.$message.error("只能上传jpg/png图片!");
        return false;
      }
      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 1MB!");
        return false;
      }
      console.log("filelist.length=%s", filelist.length);
      if (file) {
        let reader = new FileReader();
        reader.addEventListener(
          "load",
          () => {
            this.poster = reader.result;
          },
          false
        );
        reader.readAsDataURL(file.raw);
      }
    }
}