Vue-【图片上传组件】

<template>
  <div class="upload">
    <div class="uploadFile">
      <div class="previewBox">
        <div class="uploadPreview" v-if="uploadPicPreview">
          <ms-viewer :imgUrl="'data:image/jpg;base64,' + uploadPicPreview"></ms-viewer>
        </div>
        <img :src="preview" v-else>
      </div>
      <div class="uploadIcon" v-show="uploadIcon">
        <input type="file" id="fileName" ref="inputFile" :disabled="disabled" @change="fileImage" :accept="supportType">
        <label for="fileName">
          <img src="@/base/assets/realName/icon.png">
        </label>
      </div>
    </div>
    <div class="examplePic" v-show="exampleShow">
      <ms-viewer :imgUrl="example" v-if="example"></ms-viewer>
      <ms-viewer :imgUrl="png1" v-else></ms-viewer>
    </div>
 </div>
</template>
<script>
import png1 from '@/base/assets/realName/bankAccountPermit.png'
import png2 from '@/base/assets/realName/front.png'
export default {
  name: 'ms-upload',
  data () {
    return {
      imgURL: '',
      png1
    }
  },
  methods: {
    fileImage (e) {
      let $this = this
      let img = e.target.files[0]
      if (img) {
        let fileSize = img.size
        let size = fileSize / 1024
        // 限制上传文件的大小
        if (size > (this.fileSizeNumber * 1000)) {
          this.$Confirm.open({
            title: '消息',
            content: '上传图片不能超过' + this.fileSizeNumber + 'M，注意压缩图片',
            icon: 2,
            confirm: {
              text: '确认',
              show: true,
              callback: () => {
                this.$Confirm.close()
              }
            },
            cancel: {
              text: '',
              show: false
            }
          })
        } else {
          if (window.FileReader) {
            let reader = new FileReader() // 创建一个reader
            reader.readAsDataURL(img) // 将图片将转成 base64 格式
            reader.onloadend = function () {
              let suffixData = ''
              if (e.target.files[0].name) {
                suffixData = e.target.files[0].name
                  .substr(e.target.files[0].name.lastIndexOf('.') + 1).toLowerCase()
                if ($this.supportType.indexOf(suffixData) == '-1') {
                  $this.$Global.messageAlert($this, `请上传${$this.supportType}文件`)
                  return
                }
              }
              $this.imgURL = reader.result
              $this.$emit('on-change', reader.result.split(',')[1], suffixData)
            }
          } else {
            this.$Global.messageAlert(this, '您的浏览器不支持图片上传，请升级您的浏览器')
          }
        }
      }
    }
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    fileSizeNumber: {
      type: Number,
      default: 5
    },
    supportType: {
      type: String,
      default: 'image/gif, image/jpg, image/jpeg, image/png'
    },
    preview: {
      type: String,
      default: png2
    },
    example: {
      type: String,
      default: ''
    },
    exampleShow: {
      type: Boolean,
      default: true
    },
    uploadPicPreview: {
      type: String,
      default: ''
    },
    fileName: {
      type: String,
      default: 'file'
    },
    uploadIcon: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    imgURL: {
      handler (val, oldVal) {
        // console.log(val + 'hrhrh' + oldVal)
        // console.log(this.imgURL)
      },
      deep: true
    },
    uploadPicPreview: {
      handler (val, oldVal) {
        // console.log(val + 'hrhrh' + oldVal)
        // console.log(this.uploadPicPreview)
      },
      deep: true
    }
  }
}
</script>
<style lang="scss">
  @import '@/lib/scss/_var.scss';
  @import '@/src/scss/_main.scss';
  .upload {
    .uploadFile,.examplePic {
      display: inline-block;
      width: px2em(180px);
      height: px2em(120px);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .uploadFile {
      position: relative;
      .previewBox {
        width: 100%;
        height: 100%;
      }
      .uploadIcon {
        position: absolute;
        right: px2em(15px);
        bottom: px2em(15px);
        width: px2em(60px);
        height: px2em(60px);
        input {
          display: none;
        }
        label {
          display: inline-block;
          width: px2em(60px);
          height: px2em(60px);
          cursor: pointer;
        }
      }
    }
    .examplePic {
      position: relative;
      left: px2em(30px);
    }
  }
</style>