mall-web-ssr/components/common/upload/upload.vue

<template>
  <div>
    <div class="preview">
      <img :src="qualifications.url===''? uploadImgTemp : isPdf?'/images/all/timg.png':qualifications.url" class="previewImage" :class="{'mobile-previewImage': isMobile}"
        :style="imgStyle"
      />
      <input type="file" v-if="!qualifications.url" class="com-input" @change="update" accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf" />
    </div>
    <div class="hover-show" v-if="qualifications.url && !noReview">
      <span class="delete" title="删除" @click="deleteImg(qualifications.url)"><i class="fa fa-trash"></i></span>
      <a @click="showImg(qualifications.url)"><i class="fa fa-search"></i>查看</a>
    </div>
    <div id="image-box" v-if="isShow">
      <div class="x-floating-wrap"></div>
      <div class="x-floating">
        <div id="item-content">
          <div class="x-close-wrap" @click="isShow = false"><a href="javascript:void(0);">&times;</a></div>
          <div class="img"><img :src="qualifications.url"/></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['typeData', 'url', 'NopassThree', 'noReview', 'maxSize', 'imgStyle', 'HASPDF'],
    data () {
      return {
        qualifications: {
          url: '',
          type: ''
        },
        isShow: false,
        isPdf: false
      }
    },
    watch: {
      url: function (val, oldVal) {
        if (val && val !== '') {
          this.qualifications.url = val
        }
      }
    },
    computed: {
      uploadImgTemp () {
        return this.isMobile ? '/images/mobile/openStore/upload.png' : '/images/all/upload-apply.png'
      }
    },
    mounted() {
      this.qualifications.url = this.url || ''
      this.clearInfo()
    },
    methods: {
      update (e) {
        let file = e.target.files[0]
        if (!this.NopassThree) {
//          console.log(file.size)
          if (file.size > (this.maxSize || 3) * 1024 * 1024) {
            if (this.isMobile) {
              this.$emit('remindAction', `上传文件不得超过${this.maxSize || 3}M`)
            } else {
              this.$message.error(`上传文件不得超过${this.maxSize || 3}M`)
            }
//            this.baseUtils.setMessage(this, '上传文件不得超过3M', this.isMobile, false)
            return false
          }
        }
        let param = new FormData()
        param.append('file', file, file.name)
        param.append('chunk', '0')
        if (this.HASPDF === false && file.type === 'application/pdf') {
          this.$emit('remindAction', `请选择有效图片进行上传`)
        }
        if (file.type !== 'application/pdf') {
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/api/images', param, config)
            .then(response => {
              this.isPdf = false
              this.qualifications.url = response.data[0].path
              this.qualifications.type = typeof this.typeData === 'undefined' ? '' : this.typeData
              this.$emit('uploadAction', this.qualifications)
            })
        } else {
          let config = {
            headers: {'Content-Type': file.type}
          }
          this.$http.post('/file', param, config)
            .then(response => {
              this.isPdf = true
              this.qualifications.url = response.data[0].path
              this.qualifications.type = typeof this.typeData === 'undefined' ? '' : this.typeData
              this.$emit('uploadAction', this.qualifications)
            }, err => {
              console.log(err)
            })
        }
      },
      showImg (imgUrl) {
        if (!this.isPdf) {
          this.qualifications.url = imgUrl
          this.isShow = true
        } else {
          window.open(imgUrl)
        }
      },
      deleteImg () {
        this.qualifications.url = ''
        this.qualifications.type = this.typeData
        this.$emit('uploadAction', this.qualifications)
      },
      clearInfo() {
        this.qualifications = {
          url: '', type: ''
        }
        this.isShow = false
        this.isPdf = false
      }
    }
  }
</script>
<style scoped>
  .mobile-previewImage {
    width: .5rem;
    height: .5rem ;
    display: block;
    margin: .3rem auto 0;
  }
  .com-input{
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    display: inline-block !important;
  }
</style>