laws_weilai/jero-web/src/components/SplitUpload/index.vue

<template>
  <div>
    <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title" @cancel="handlePreImgCancel">
      <a-upload-dragger
        :accept='accept'
        :disabled="disabled"
        class="split-upload-list"
        name="file"
        :file-list="myfileList"
        :multiple="true"
        :action='uploadAction'
        :headers="headers"
        :list-type="listType"
        @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;margin-left: 5px;">{{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'

  export default {
    name: 'file',
    props: ['disableds', 'disabled', 'thisFileUploadUrl', 'readonly', 'thisFileType','accept','title','listType','splitVisible'],
    data() {
      return {
        visible: false,
        uploadAction: window._CONFIG['domianURL'] + '/split/sarFileSplitItems/upload',
        upDataList: [],
        downLoadFileUrl: window._CONFIG['domianURL'] + '/sys/common/static',
        fileList: [],
        myfileList: [],
        isLoding: false,
        headers:'',
        previewImage:{},
        // accept:'image/*'
        uploadFileFlag:0,

      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN)
      this.headers = { 'X-Access-Token': token }
      this.containerId = 'container-ty-' + new Date().getTime()
    },
    mounted() {
      this.visible=this.splitVisible
      // console.log('accept11111',this.accept)
      // 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) {
        let fileFlag=false
        // console.log('accept',this.accept,file)
        this.fileTypeSatus=false
          let fileTypes=this.accept.split('/')
          let fileNowTypes=file.type.split('/')
          fileFlag=(fileTypes[0]==fileNowTypes[0])?true:false
        // console.log('filetype',fileFlag)
        if(!fileFlag){
          this.$message.warning(this.$t('fileFormatIncorrect'))
          this.fileTypeSatus = false
        }else{
          // let thisFileType = this.thisFileType.replace(/\s+/g, "");
          if(this.uploadFileFlag<20){
            this.uploadFileFlag++
          }

          this.fileTypeSatus = true
          this.$message.destroy()
          // 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
          this.errorMessage = file.name + '文件大小超出1000MB限制, 请压缩或降低文件质量!'
        }

      },
      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,fileList } = info
        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 > 1000000000) {
            this.$message.error(this.errorMessage)
            return
          } else {
            if (status === 'error') {
              this.uploadFileFlag--
              this.$emit('uploadSuccess', this.fileList)
              this.$message.destroy()
              this.$message.error(`${info.file.name} `+this.$t('fileUploadFailed'))
            } else if (status === 'removed') {
              this.uploadFileFlag--
              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,fileList,this.uploadFileFlag)
              if (this.myfileList.length > 0) {
                this.$message.destroy()
                this.$message.success(`${info.file.name} `+this.$t('deletedSuccessfully'))
              }
            } else if (status === 'done') {
              this.uploadFileFlag--
              this.fileList = []
              this.myfileList = info.fileList
              console.log('listLength11111',info.fileList.length)
              if (info.fileList.length > 20) {
                this.$message.destroy()
                this.$message.error(this.$t('uploadMaximumATime'))
                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)
                  }
                })
                return
              }else{

                this.myfileList.forEach((res) => {
                  if (res.response) {
                    this.fileList.push(res.response.result)
                  } else {
                    this.fileList.push(res)
                  }
                })
                // console.log('file111111',this.fileList,fileList,file,this.uploadFileFlag)
                this.$emit('uploadSuccess',file, this.fileList,fileList,this.uploadFileFlag)
                // console.log('uplossss',this.fileList,fileList)
                if (this.myfileList.length > 0) {
                  this.$message.destroy()
                  this.$message.success(`${info.file.name} `+this.$t('uploadSuccessful'))
                }
              }

            } else if (status === 'uploading') {
              // this.uploadFileFlag++
              this.myfileList = info.fileList
              // this.$message.success(`${info.file.name} 文件上传成功。`);
            }
          }
        }
      },
      resetFileList() {
        this.myfileList = []
        this.fileList = []
      },
      preview(file) {
        // console.log('file111',file)
        this.previewImage = file.response.path;
      },
      handlePreImgCancel(){
        this.$emit('coloseHandle',false)
      }
    }
  }
</script>

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

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