element图片上传自定义

 <el-form-item label="" style="display:inline-block;text-align:center;" >

        <img

            v-if="imgBackUrl"

            :src="imgBackUrl"

            class="avatar"

          />

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

        <div>背景图片:</div>

        <el-upload action=""  :show-file-list="false" accept="image/png,image/jpg,image/jpeg" :http-request="uploadMainImg"   :before-upload="(file) =>beforeUpload(file,flag='2')" >

          <el-button   size="small" type="primary" icon="el-icon-upload">上传图片</el-button>

        </el-upload>

      </el-form-item>

 

<style scoped>

.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: 100px;

  height: 100px;

  line-height: 178px;

  text-align: center;

}

.avatar {

  width: 100px;

  height: 100px;

  display: inline-block;

}

</style>

<style lang='scss'>

.hide .el-upload--picture-card {

  display: none;

}

</style>