laws-sinotruk-client/src/components/splitUpload/SplitAddClauseUploadImage.vue

<template>
  <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>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'SplitAddClauseUploadImage',
  props: [
    'disabled',
    'accept',
    'title',
    'listType'
  ],
  data () {
    return {
      visible: false,
      uploadAction: window._CONFIG.domianURL + '/split/sarFileSplitItems/upload',
      downLoadFileUrl: window._CONFIG.domianPreviewURL + '/sys/common/static',
      fileList: [],
      myFileList: [],
      headers: '',
      previewImage: {},
      uploadFileFlag: 0
    }
  },
  created () {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
    this.containerId = 'container-ty-' + new Date().getTime()
  },
  methods: {
    open () {
      this.visible = true
    },
    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
      const fileTypes = this.accept.split('/')
      const fileNowTypes = file.type.split('/')
      fileFlag = (fileTypes[0] === fileNowTypes[0])
      // 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
    },
    handleChange (info) {
      const { 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)
        } 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)
            if (this.uploadFileFlag === 0) {
              this.visible = false
            }
            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)
                }
              })
            } 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)
              if (this.uploadFileFlag === 0) {
                this.visible = false
              }
              // 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.visible = false
    }
  }
}
</script>

<style scoped>

</style>