2024-08-06

king

2024-08-06 70f30488f31c2adb1cfb3cb2452ea27c85167019

 src/tabviews/zshare/fileupload/index.jsx

@@ -1,24 +1,18 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import moment from 'moment'
import { Upload, Button, Progress, notification } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import SparkMD5 from 'spark-md5'
import Api from '@/api'
import './index.scss'

let service = ''
if (process.env.NODE_ENV === 'production') {
  service = document.location.origin + '/' + window.GLOB.service
} else {
  service = window.GLOB.location + '/' + window.GLOB.service
}
import Api from '@/api'
import MKEmitter from '@/utils/events.js'
import './index.scss'

class FileUpload extends Component {
  static propTpyes = {
    config: PropTypes.object,  // 表单信息
    onChange: PropTypes.func,  // 表单变化
    data: PropTypes.any,
    config: PropTypes.object,
    onChange: PropTypes.func,
  }

  state = {
@@ -31,11 +25,12 @@
    compress: 'false',
    fileType: 'text',
    showprogress: false,
    maxSize: 0,
    filelist: []
  }

  UNSAFE_componentWillMount () {
    const { config } = this.props
    const { config, data } = this.props

    let filelist = []
    if (config.initval) {
@@ -60,6 +55,12 @@
          })
        } catch (e) {
          filelist = []
        }

        if (data && config.subFields && config.subFields.length === 1 && filelist.length === 1) {
          if (data[config.subFields[0].field]) {
            filelist[0].name = data[config.subFields[0].field]
          }
        }
      }
    }
@@ -96,6 +97,7 @@
      filelist,
      compress,
      limit: config.limit || 2,
      maxSize: config.maxSize || 0,
      maxFile: maxFile,
      fileType: config.fileType || 'text'
    })
@@ -134,7 +136,9 @@
    this.props.onChange(vals.join(','))
  }

  onUpdate = (url) => {
  onUpdate = (url, file_name) => {
    const { config } = this.props

    let filelist = fromJS(this.state.filelist).toJS()

    if (filelist[filelist.length -1]) {
@@ -156,7 +160,20 @@
    })

    this.setState({filelist})
    this.props.onChange(vals.join(','))

    if (config.subFields && file_name) {
      let other = {}
      config.subFields.forEach((n, i) => {
        other[n.field] = file_name
        setTimeout(() => {
          MKEmitter.emit('mkFC', 'input', n.uuid, file_name)
        }, i * 5)
      })

      this.props.onChange(vals.join(','), other)
    } else {
      this.props.onChange(vals.join(','))
    }
  }

  onFail = (msg) => {
@@ -176,44 +193,6 @@
    })
  }

  shardupload = (param) => {
    let form = new FormData()

    form.append('file', param.binary)
    form.append('fileMd5', param.fileMd5)
    form.append('shardingMd5', param.fileMd5)
    form.append('baseDomain', service)
    form.append('rootPath', 'Content/images/upload/')
    form.append('fileName', param.fileName)
    form.append('fileExt', param.fileType)
    form.append('shardingCnt', 1)
    form.append('shardingNo', 1)
    form.append('LoginUID', sessionStorage.getItem('LoginUID') || '')
    form.append('UserID', sessionStorage.getItem('UserID') || '')

    Api.getLargeFileUpload(form).then(res => {
      if (res.status) {
        if (res.urlPath) {
          this.onUpdate(res.urlPath)
        } else {
          this.onFail()
        }
        this.setState({
          percent: 100
        }, () => {
          setTimeout(() => {
            this.setState({
              showprogress: false,
              percent: 0
            })
          }, 200)
        })
      } else {
        this.onFail(res.message)
      }
    })
  }

  getuuid = () => {
    let uuid = []
    let _options = '0123456789abcdefghigklmnopqrstuv'
@@ -225,7 +204,7 @@
  }

  beforeUpload = (file) => {
    const { accepts, compress, limit, rduri } = this.state
    const { accepts, compress, limit, rduri, maxSize } = this.state

    if (accepts && file.name) {
      let pass = false
@@ -242,11 +221,23 @@
        return false
      }
    }
    if (maxSize) {
      let fileSize = file.size / 1024 / 1024

      if (fileSize > maxSize) {
        setTimeout(() => {
          this.onFail(`文件大小不可超过${maxSize}M`)
        }, 10)
        return false
      }
    }

    this.setState({
      showprogress: true,
      percent: 0
    })

    let file_name = file.name

    if (compress === 'true' || compress === 'base64') {
      let reader = new FileReader()
@@ -287,7 +278,7 @@
          let param = {Base64Img: cvs.toDataURL('image/jpeg', compressRate)}

          if (this.props.config.compress === 'base64') {
            this.onUpdate(param.Base64Img)
            this.onUpdate(param.Base64Img, file_name)
  
            this.setState({
              percent: 100
@@ -306,13 +297,13 @@
  
            Api.fileuploadbase64(param).then(result => {
              if (result.status && result.Images) {
                let url = service + result.Images
                let url = window.GLOB.baseurl + result.Images
  
                if (rduri) {
                  url = rduri.replace(/webapi(.*)$/, '') + result.Images
                }
  
                this.onUpdate(url)
                this.onUpdate(url, file_name)
  
                this.setState({
                  percent: 100
@@ -353,7 +344,7 @@
        if (res.status) {
          if (res.urlPath) {
            let path = (/^\/\//.test(res.urlPath) ? 'https:' : '') + res.urlPath
            this.onUpdate(path)
            this.onUpdate(path, file_name)
            this.setState({
              percent: 100
            }, () => {
@@ -375,49 +366,31 @@
      return false
    }

    // 兼容性的处理
    let spark = new SparkMD5.ArrayBuffer()         // 对arrayBuffer数据进行md5加密，产生一个md5字符串
    let totalFileReader = new FileReader()         // 用于计算出总文件的fileMd5
    let param = {}
    let form = new FormData()

    param.fileName = file.name.replace(/\.{1}[^.]*$/ig, '')  // 文件名（去除后缀名）
    param.fileType = file.name.replace(/^.*\.{1}/ig, '')     // 文件类型
    form.append('file', file)

    if (!/^[A-Za-z0-9]+$/.test(param.fileName)) {            // 文件名称含有英文及数字之外字符时，名称系统生成
      param.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid()
    }

    totalFileReader.readAsArrayBuffer(file)
    totalFileReader.onload = (e) => {   // 对整个totalFile生成md5
      spark.append(e.target.result)
      param.fileMd5 = spark.end()       // 计算整个文件的fileMd5
      param.binary = file

      let _param = new FormData()
      _param.append('fileMd5', param.fileMd5)
      
      Api.getFilePreUpload(_param).then(res => {
        if (res.status && res.urlPath) {
          this.onUpdate(res.urlPath)
          this.setState({
            percent: 100
          }, () => {
            setTimeout(() => {
              this.setState({
                showprogress: false,
                percent: 0
              })
            }, 200)
          })
    Api.getFileUpload(form).then(res => {
      if (res.status) {
        if (res.urlPath) {
          this.onUpdate(res.urlPath, file_name)
        } else {
          this.shardupload(param)
          this.onFail()
        }
      })
    }

    totalFileReader.onerror = () => {
      this.onFail('文件读取失败！')
    }
        this.setState({
          percent: 100
        }, () => {
          setTimeout(() => {
            this.setState({
              showprogress: false,
              percent: 0
            })
          }, 200)
        })
      } else {
        this.onFail(res.message)
      }
    })

    return false
  }