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'
      :headers="headers"
      :before-upload="beforeUpload"
      :remove='remove'
      @change="handleChange">
      <p><a-icon style="font-size: 67px;color: #c0c4cc;" 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"
  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",
         myuploadAction:window._CONFIG['domianURL']+this.thisFileUploadUrl,
         upDataList:[],
         downLoadFileUrl:window._CONFIG['domianURL']+'/sys/common/static',
         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;
      },
      mydownload(item){
        var fileName = item.fileName;
        downFile(this.downLoadFileUrl+'/'+item.ext1,{}).then((data)=>{
          if (!data) {
            this.$message.destroy()
            this.$message.warning("文件下载失败")
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName)
          }else{
            let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
          }
        })
      },
      mypreview(item){
        console.log(item);
        let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl+'/'+item.ext1)
        window.open(url, '_blank')
      },
      handleChange(info) {
        let { file } = 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} 文件上传失败。`);
            } 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)
                }
              })
              this.$emit('uploadSuccess', this.fileList)
              if(this.myfileList.length > 0){
                this.$message.destroy()
                this.$message.success(`${info.file.name} 文件上传成功。`);
              }
            } else if (status === 'uploading') {
              this.myfileList = info.fileList;
              this.$emit('uploadSuccess')
              // this.$message.success(`${info.file.name} 文件上传成功。`);
            }
          }
        }else{
          this.$message.warning('不支持上传该类型的文件!')
        }
      },
      resetFileList(){
        this.myfileList = [];
        this.fileList = [];
      },
    },
  }
</script>

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