sysUpload.vue上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')

上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')

<!--
* @description 上传组件
* @fileName sysUpload.vue
* @author 彭成刚
* @date 2019/04/04 11:51:13
* @version V1.0.0
!-->
<template>
  <div>
    <Upload :action="$baseUrl + 'API/file/upload'"
            ref="upload"
            :class="disabled ? 'uploadDisabled' : ''"
            :default-file-list="defaultFileList"
            name="file"
            :on-preview="handleOnPreview"
            :headers="headers"
            :on-success="handleSuccess"
            :on-remove="handleOnRemove"
            :before-upload="handleBeforeUpload">
      <Button icon="ios-cloud-upload-outline"
              :disabled="disabled">上传文件</Button>
    </Upload>
    <!-- <div v-if="defaultVif">
      <Icon type="md-document" /> <a :href="this.defaultList.url">{{this.defaultList.name}}</a>
    </div> -->
    <!-- <div v-if="disabled"
         style="float:left;">{{defaultList.name}}</div> -->
    <!-- <div style="float:left;">
              <Alert type="success"
                     v-if='alertVif'
                     @on-close='alertClose'
                     show-icon
                     closable>
                {{alertText}}
              </Alert>
            </div> -->
  </div>
</template>

<script>
import { getToken } from '@/libs/util'
export default {
  // 多个值的初始化 还是用init吧
  props: {
    headers: {
      type: Object,
      default: () => {
        return { token: getToken() }
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showUploadList: false,
      defaultVif: false,
      defaultList: { name: '', url: '' },
      defaultFileList: [],
      defaultFileList2: [{ name: '' }],
      alertText: ''
    }
  },

  components: {},

  computed: {},

  // mounted() {},

  methods: {
    handleOnPreview (file) {
      console.info('handleOnPreview file', file)
      if (file.url) {
        window.location.href = file.url
      } else {
        let f = file.response.data
        console.info('f.fileServiceUrl + f.filePath', f.fileServiceUrl + f.filePath)
        window.location.href = f.fileServiceUrl + f.filePath
      }
    },
    handleOnProgress (event, file, fileList) {
      console.info('handleOnProgress (event, file, fileList) {', event, file, fileList)
    },
    handleOnRemove (file, fileList) {
      console.info('handleOnRemove', file, fileList)
      this.$emit('emit-data', { id: '' })
    },
    handleSuccess (response, file, fileList) {
      // this.showUploadList = false
      console.info('handleSuccess', response, file, fileList)
      if (response.status.toString() === '20') {
        // 上传成功
        this.defaultVif = true
        this.defaultList.name = response.data.origName
        this.defaultList.url = response.data.fileServiceUrl + response.data.filePath
        this.$Message.success('上传成功！')
        this.$emit('emit-data', response.data)
      } else {
        // 上传失败
        this.$Message.warning(response.msg)
      }
    },
    handleBeforeUpload (item) {
      this.showUploadList = true
      let warningStr = ''
      let format = ['zip']
      if (this.checkFormat(item.name, format)) { warningStr += '文件格式不符，请上传zip格式 ' }
      if (this.checkSize(item.size, 20)) { warningStr += '文件大小超过20M，请检查后重新上传！' }
      if (warningStr.length !== 0) {
        this.$Message.warning({
          content: warningStr,
          duration: 3,
          closable: true
        })
        return false
      }

      if (this.$refs.upload.fileList.length === 1) {
        console.info('file.length 2 come in')
        this.$refs.upload.fileList.splice(0, 1)
      }
      console.info('default-file-list', this.$refs.upload.fileList)
      console.info('file', item)
    },
    checkSize (size, maxSize) {
      // size 单位是byte maxSize 单位是mb
      let maxSizeByte = maxSize * 1024 * 1024
      if (size > maxSizeByte) {
        return true
      } else {
        return false
      }
    },
    checkFormat (fileName, format) {
      let index = fileName.lastIndexOf('.')
      let suffix = fileName.substr(index + 1)
      // console.info('suffix', suffix)
      let ret = true
      format.some((item, index, arr) => {
        if (item === suffix) {
          ret = false
        }
      })
      return ret
    },
    init (nameStr, url) {
      console.info('nameStr', typeof nameStr, nameStr)
      console.info('url', url)
      if (nameStr !== null && nameStr !== '') {
        // this.defaultVif = true
        this.defaultFileList = []

        this.defaultFileList.push({ name: nameStr, url: url })
        // this.$refs.upload.fileList[0].name = nameStr
        // this.$refs.upload.fileList[0].url = url
        // this.defaultList.name = nameStr
        // this.defaultList.url = url
      }
    }
  }
}

</script>
<style lang='less'>
.uploadDisabled {
  .ivu-upload-list-remove {
    display: none;
  }
}
</style>