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

<template>
  <div class="ocr-upload">
<!--    <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title" class="ocr-upload-modal">-->
      <a-upload
        :accept='accept'
        :disabled="disabled"
        class="ant-upload-list"
        name="file"
        :list-type="listType"
        :file-list="myfileList"
        :multiple="false"
        :action = 'uploadAction'
        :headers="headers"
        :before-upload="beforeUpload"
        :remove='remove'
        @change="handleChange">
<!--        <p><a-icon style="font-size: 67px;color: #c0c4cc;" type="cloud-upload" /></p>-->
        <a-button  type="primary" v-if="module=='ocr'" ghost class="ant-upload-text" style="font-size: 14px;line-height: 30px">{{$t('clickUpload')}}</a-button>
        <a-button  type="primary" v-if="module=='split'" class="ant-upload-text" style="font-size: 14px;line-height: 30px">{{$t('clickUpload')}}</a-button>
      </a-upload>
<!--    </a-modal>-->
  </div>
</template>

<script>
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  export default {
    name: 'ocrUpload',
    props:['disableds','disabled','thisFileUploadUrl','readonly','thisFileType','accept','title','listType','module'],
    data(){
      return{
        visible:false,
        uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
        downLoadFileUrl:window._CONFIG['domianPreviewURL']+'/sys/common/static',
        myfileList:[],
        fileList:[],
        fileTypeSatus:false,
        headers:{},
      }
    },
    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:{
      beforeUpload(file,fileList) {
        // console.log('file',this.accept)
        this.fileTypeSatus=false
        if(this.myfileList&&this.myfileList.length>=1){
          this.$message.warning(this.$t('onlyOnefileUploaded'))
          return false
        }else{
          // let thisFileType = this.thisFileType.replace(/\s+/g, "");
          if(file.type==this.accept){
            // console.log('111111')
            this.fileTypeSatus = true;
            this.$message.destroy()
            // 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
            this.errorMessage = file.name + "文件大小超出100MB限制, 请压缩或降低文件质量!";
          }
        }
      },
      remove(){
        this.fileTypeSatus = true;
        // console.log('rrr',this.myfileList)
      },
      handleChange(info) {
        // console.log('info',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 > 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}`+this.$t('fileUploadFailed'));
            } 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)
                }
              })
              // console.log('remove',this.fileList)
              this.$emit('uploadSuccess', this.fileList)
              this.$message.destroy()
              this.$message.success(`${info.file.name}`+this.$t('deletedSuccessfully'));
            } else if (status === 'done') {
              this.fileList = []
              this.myfileList = info.fileList;
              // console.log('file3333',info.fileList)
              if (info.fileList.length > 1) {
                info.fileList.splice(1)
                // this.myfileList = info.fileList;

                this.myfileList.forEach((res) => {
                  if (res.response) {
                    this.fileList.push(res.response.result)
                  } else {
                    this.fileList.push(res)
                  }
                })
                // console.log('file1111',this.fileList)
                this.$emit('uploadSuccess', this.fileList)
                this.$message.destroy()
                this.$message.error(this.$t('onlyOnefileUploaded'));
                return
              }
              // console.log('my222',this.myfileList)
              this.myfileList.forEach((res) => {
                if (res.response) {
                  this.fileList.push(res.response.result)
                  // console.log('flist',res.response)
                } else {
                  this.fileList.push(res)
                }
              })

              if(this.myfileList.length > 0){
                this.$emit('uploadSuccess', this.fileList)
                this.$message.destroy()
                this.$message.success(`${info.file.name}`+this.$t('uploadSuccessful'));
              }
            } else if (status === 'uploading') {
              this.myfileList = info.fileList;
              this.$emit('uploadSuccess')
              // this.$message.success(`${info.file.name} 文件上传成功。`);
            }
          }
        }else{
          this.$message.warning(this.$t('typeCannotUploaded'))
        }
      },
    }
  }
</script>

<style lang="less" scoped>

</style>


<style lang="less">
  .ocr-upload-modal{
    .ant-modal-wrap{
      z-index: 1002;
    }
  }

</style>