laws_weilai/jero-web/src/components/uploadFile/file.vue

<template>
  <div>
    <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title">
      <a-upload-dragger
        accept='*.*'
        :disabled="disabled"
        class="ant-upload-list"
        name="file"
        :file-list="myfileList"
        :multiple="true"
        :action="uploadAction+'?state='+state"
        :headers="headers"
        @preview="preview"
        :before-upload="beforeUpload"
        :remove='remove'
        @change="handleChange">
        <p>
          <a-icon class="action-upload" type="cloud-upload"/>
        </p>
        <p class="ant-upload-text" style="font-size: 14px;line-height: 30px">{{this.$t('clickUpload')}}</p>
      </a-upload-dragger>
    </a-modal>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import { getAction, postAction, downFile, downloadFile } from '@/api/manage'
  import { Base64 } from 'js-base64'

  export default {
    name: 'file',
    props: ['disableds', 'disabled', 'thisFileUploadUrl', 'readonly', 'thisFileType'],
    data() {
      return {
        visible: false,
        title: this.$t('clickUpload'),
        uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
        state: undefined,
        myuploadAction: window._CONFIG['domianURL'] + this.thisFileUploadUrl,
        upDataList: [],
        downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
        fileList: [],
        myfileList: [],
        isLoding: false
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN)
      this.headers = { 'X-Access-Token': token }
      this.containerId = 'container-ty-' + new Date().getTime()
    },
    mounted() {
      // console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
    },
    methods: {
      perentHandleFunc(data) {
        this.myfileList = data
        if (data && data.length > 0) {
          this.myfileList.forEach((res) => {
            res.name = res.fileName
            res.uid = res.id
          })
        } else {
          this.myfileList = []
        }
      },
      beforeUpload(file) {

        console.log(file)
        // let thisFileType = this.thisFileType.replace(/\s+/g, "");
        this.fileTypeSatus = true
        //TODO 客户要求不拦截文件
        // if(file.type){
        //   if (thisFileType.indexOf(file.type) != -1) {
        //     this.fileTypeSatus = true;
        //   }else{
        //     this.fileTypeSatus = false;
        //   }
        // }else{
        //   if(file.name.slice(file.name.length - 3 , file.name.length)  == 'rar'){
        //    this.fileTypeSatus = true
        //   }else if(file.type == 'application/x-zip-compressed'){
        //     this.fileTypeSatus = true
        //   }else{
        //     this.fileTypeSatus = false;
        //   }
        // }
        this.$message.destroy()
        // 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
        this.errorMessage = file.name + '文件大小超出100MB限制, 请压缩或降低文件质量!'

      },
      remove() {
        this.fileTypeSatus = true
      },
      mypreview(item) {
        let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl + '/' + item.ext1)
        window.open(url, '_blank')
      },
      handleChange(info) {
        let { file } = info
        console.log(file)
        const status = info.file.status
        info.fileList.forEach((val, index) => {
          if (val.response && !val.response.result) {
            this.$message.error(val.response.message)
            info.fileList.splice(index, 1)
          }
        })
        if (this.fileTypeSatus) {
          if (file.size > 100000000) {
            this.$message.error(this.errorMessage)
            return
          } else {
            if (status === 'error') {
              this.$emit('uploadSuccess', this.fileList)
              this.$message.destroy()
              this.$message.error(`${info.file.name} 文件上传失败。`)
            } else if (status === 'removed') {
              this.myfileList = info.fileList
              this.fileList = []
              this.myfileList.forEach((res) => {
                if (res.response) {
                  this.fileList.push(res.response.result)
                } else {
                  this.fileList.push(res)
                }
              })
              this.$emit('uploadSuccess', this.fileList)
              if (this.myfileList.length > 0) {
                this.$message.destroy()
                this.$message.success(`${info.file.name} 删除成功。`)
              }
            } else if (status === 'done') {
              this.fileList = []
              this.myfileList = info.fileList
              if (info.fileList.length > 20) {
                info.fileList.splice(20)
                this.myfileList = info.fileList
                this.myfileList.forEach((res) => {
                  if (res.response) {
                    this.fileList.push(res.response.result)
                  } else {
                    this.fileList.push(res)
                  }
                })
                this.$emit('uploadSuccess', this.fileList)
                this.$message.destroy()
                this.$message.error('最多只能上传二十个')
                return
              }
              this.myfileList.forEach((res) => {
                if (res.response) {
                  this.fileList.push(res.response.result)
                } else {
                  this.fileList.push(res)
                }
              })
              console.log(this.myfileList)
              this.$emit('uploadSuccess', this.fileList)
              if (this.myfileList.length > 0) {
                this.$message.destroy()
                if (file.response.success) {
                  this.$message.success(`${info.file.name} 文件上传成功。`)
                }
              }
            } else if (status === 'uploading') {
              this.myfileList = info.fileList
              // this.$message.success(`${info.file.name} 文件上传成功。`);
            }
          }
        } else {
          this.$message.warning('不支持上传该类型的文件!')
        }
      },
      resetFileList() {
        this.myfileList = []
        this.fileList = []
      },
      preview(file) {
        let fileQuery = file.response ? file.response.result : file
        let fileName = fileQuery.fileName
        let index1 = fileName.lastIndexOf('.')
        let index2 = fileName.length
        let fileSuffix = fileName.substring(index1, index2)
        if (fileSuffix === '.pdf') {
          window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + fileQuery.id))
        } else if (fileSuffix === '.docx') {
          let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
          window.open(url, '_blank')
        } else if (fileSuffix === '.xlsx' || fileSuffix === '.xls') {
          let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
          window.open(url, '_blank')
        } else {
          downloadFile('/sys/common/downLoadFile', fileQuery.fileName, { id: fileQuery.id })
        }
      }
    }
  }
</script>

<style>
  .ant-upload-list-item-name {
    color: rgba(0, 0, 0, 0.65) !important;
  }

  .action-upload {
    font-size: 67px;
    color: #c0c4cc;
  }
</style>