上传身份证 单张图片

<template>
  <div class="upload-div">
    <div v-if="images.length>=1">
      <viewer :images="images">
            <span  v-for="(item,$index) in images"  class="imglist images imgSpan" :key="item.filePath">
              <img :src="item.filePath" :key="item.filePath" width="300">
              <div v-if="item.filePath" class="handle">
                <div style="float: left" >
                  <Icon v-if="!disabled" class="h-icon" title="刪除" type="md-trash" @click.stop="handleDelete(item.id,$index)"/>
                </div>
                <div style="float: right">
                  <Icon class="h-icon" title="查看" type="md-eye" @click.stop="handleViewer()"/>
                </div>
               </div>
            </span>
      </viewer>
    </div>
      <upload
        v-else
        :data="params"
        :format="format"
        :show-upload-list="false"
        :max-size="10 * 1024"
        :disabled="disabled"
        :before-upload="beforeUpload"
        :on-progress="onProgress"
        :on-success="onSuccess"
        :action="baseUrl + action"
        :headers="header">
        <div>
          <img src="../../../assets/images/id1.png"
               alt="身份证正面"
               v-if="fileType===1"
               style="width:250px; height:205px;"/>
          <img src="../../../assets/images/id2.png"
               alt="身份证反面"
               v-if="fileType===2"
               style="width:250px; height:205px;"/>
          <div class="upload-div-item images" v-if="fileType===5 || fileType===4">
            <template>
              <Icon  type="ios-add" size="52" style="color: #3399ff"></Icon>
              <p>上传图片</p>
            </template>
          </div>
        </div>
      </Upload>
  </div>
</template>
<script>
  import { getToken } from '@/libs/util'
  import { _baseUrl, delFile } from '@/api/upload'
  import { getList } from '@/api/attachment'
  import _ from 'loadsh'
  export default {
    name: 'OneImgUpload',
    data () {
      return {
        baseUrl: '',
        action: '/file/upload',
        header: {},
        params: {},
        images: [],
        contral1:false,  //身份证正面控制
        contral2:false   //身份证反面控制

      }
    },
    props: {
      modalshow: {
        type: Boolean,
        default: false
      },
      userId: {
        type: [String, Number],
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      houseId: {
        type: String,
        default: ''
      },
      fileType: {
        type: Number,
        default: ''
      },
      openId: {
        type: String,
        default: ''
      },
      companyImg: {
        type: Boolean,
        default: false
      },
      format: {
        type: Array,
        default: () => {
          return ['jpg', 'jpeg', 'png', 'bmp']
        }
      },
      // 初始化时显示的图片
      initImgSrc: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '200'
      },
      height: {
        type: String,
        default: '150'
      },
      addModalShow:{
        type:Boolean,
        default:''
      }
    },
    watch: {
      modalshow: {
        immediate: true,
        handler (v) {
          if (v) this.loadimglist()
        }
      }
    },
    mounted () {
      this.baseUrl = _baseUrl
      this.header.token = getToken()
    },
    methods: {
      beforeUpload (file) {
        if(this.houseId){
          debugger
          this.params['file'] = file
          this.params['fileType'] = this.fileType
          this.params['houseId'] = this.houseId
          this.params['openId'] = this.openId
        }else{
          this.$Message.error('请保存基础信息')
        }
      },
      onProgress (event, file, fileList) {
      },
      // 上传成功后调用
      onSuccess (response, file, fileList) {
        if (response.data) {
          this.images.push(response.data)
          console.log(this.images)
          if(this.fileType===1){
            this.contral1=true
          }
          this.$Message.success('上传成功')
        } else {
          this.$Message.error(response.msg)
        }
      },
      handleViewer () {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
        return false
      },
      handleDelete (id, index) {
        const m = this
        delFile({ id: id }).then(res => {
          if (res) {
            m.images = _.remove(m.images, (el, k) => k != index)
            this.$Message.success('刪除成功')
          }
        })
      },
      loadimglist () {
        const m = this
        if(m.addModalShow===false){
          m.images=[]
        }
        if(this.houseId){
          getList({ fileType: m.fileType, houseId: m.houseId }).then(res => {
            if (res.data.status == 0) {
              m.images = res.data.data
              console.log('images', this.images)
            }
          })
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .upload-div-item {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .upload-div :hover .h-icon {
    display: block;
  }
  .h-icon {
    font-size: 20px;
    background: #2d8cf0;
    color: #fff;
    padding: 3px;
    display: none;
  }
  .imgSpan{
    width: 250px;
    position: relative;
    display: inline-block;
    img{
      width: 96%;
      height: 200px;
      border-radius: 5px;
      object-fit: cover;
    }
    .handle {
      position: absolute;
      width: 56px;
      height: 24px;
      right: 4%;
      bottom: 10px;
    }
  }
  .ivu-upload{
    width: 260px;
    text-align: center;
    /deep/ .ivu-upload.ivu-upload-select{
      width: 255px;
      height: 220px;
      /*虚线框*/
      border: 1px dashed #d0d0d0;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .ivu-upload>span{
    display: inline-block;
    vertical-align: top;
  }
</style>