element单图上传回显封装

<template>

  <el-upload

    class="avatar-uploader"

    :action="$url.programe+'attachment/uploadAttach'"

    :data="data"

    :on-success="onSuc"

    :show-file-list="false"

    :on-progress="onProgress"

    :disabled="disableds"

    accept=".jpg, .png, .PNG, .JPG"

  >

    <img v-if="imageUrl" :src="imageUrl" class="avatar" />

    <i v-else class="el-icon-plus avatar-uploader-icon"></i>

  </el-upload>

</template>

   

<script>

export default {

  data() {

    return {

      imageUrl: "",

      disableds: false,

      data: {

        type: ""

      }

    };

  },

  methods: {

    onSuc(res, file) {

      this.imageUrl = "";

      this.$emit("input", res);

    },

    onProgress(event, file, fileList) {

      this.imageUrl = require("../assets/img/load.gif");

      this.disableds = true;

    }

  },

  props: {

    fileList: {

      type: Array,

      default() {

        return [];

      }

    },

    type: {

      type: String,

      default: ""

    }

  },

  mounted() {

    this.data.type = this.type;

  }

};

</script>

<style>

.avatar-uploader .el-upload {

  border: 1px dashed #d9d9d9;

  border-radius: 6px;

  cursor: pointer;

  position: relative;

  overflow: hidden;

}

.avatar-uploader .el-upload:hover {

  border-color: #409eff;

}

.avatar-uploader-icon {

  font-size: 28px;

  color: #8c939d;

  width: 148px;

  height: 148px;

  line-height: 148px;

  text-align: center;

}

.avatar {

  width: 148px;

  height: 148px;

  display: block;

}

</style>

 

 

 

        

<upload type="ENTERPRISE_BUSLICENSE" v-model="from.image1"></upload>