2024-08-06

king

2024-08-06 70f30488f31c2adb1cfb3cb2452ea27c85167019

 src/tabviews/zshare/fileupload/index.jsx

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

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 = {
    value: PropTypes.array,    // 文件数组
    accept: PropTypes.any,     // 文件格式
    maxFile: PropTypes.any,    // 最大文件数
    fileType: PropTypes.string // 文件显示类型
    data: PropTypes.any,
    config: PropTypes.object,
    onChange: PropTypes.func,
  }

  state = {
    percent: 0,
    accept: '',
    accepts: null,
    maxFile: null,
    rduri: '',
    limit: 2,
    compress: 'false',
    fileType: 'text',
    showprogress: false,
    maxSize: 0,
    filelist: []
  }

  UNSAFE_componentWillMount () {
    const { value } = this.props
    if (!value) return
    const { config, data } = this.props

    this.setState({filelist: fromJS(value).toJS()})
    let filelist = []
    if (config.initval) {
      if (/^data:image/.test(config.initval)) {
        filelist = [{
          uid: '0',
          name: 'data:image/jpeg;base64',
          status: 'done',
          url: config.initval,
          origin: true
        }]
      } else {
        try {
          filelist = config.initval.split(',').map((url, index) => {
            return {
              uid: `${index}`,
              name: url.slice(url.lastIndexOf('/') + 1),
              status: 'done',
              url: url,
              origin: true
            }
          })
        } 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]
          }
        }
      }
    }

    let accept = ''
    let accepts = null
    let compress = config.compress || 'false'
    let maxFile = config.maxfile && config.maxfile > 0 ? config.maxfile : null
    if (compress === 'true' || compress === 'base64') {
      accepts = ['.jpg', '.png', '.gif', '.jpeg']
      accept = accepts.join(',')
      if (compress === 'base64') {
        maxFile = 1
      }
    } else if (config.suffix) {
      accepts = config.suffix.split(',').map(item => {
        if (!/^\./ig.test(item)) {
          item = '.' + item
        }
        return item
      })
      accept = accepts.join(',')
    }
    let rduri = config.rduri || ''
    
    if (window.GLOB.systemType === 'production') {
      rduri = config.proRduri || ''
    }

    this.setState({
      rduri,
      accept,
      accepts,
      filelist,
      compress,
      limit: config.limit || 2,
      maxSize: config.maxSize || 0,
      maxFile: maxFile,
      fileType: config.fileType || 'text'
    })
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  onChange = ({ fileList }) => {
@@ -44,17 +116,29 @@
    })

    this.setState({filelist: fileList})
    this.props.onChange(fileList)
  }

  onRemove = file => {
    const files = this.state.filelist.filter(v => v.uid !== file.uid)

    this.setState({filelist: files})
    this.props.onChange(files)

    let vals = []

    files.forEach(item => {
      if (item.origin && item.url) {
        vals.push(item.url)
      } else if (!item.origin && item.status === 'done' && item.response) {
        vals.push(item.response)
      }
    })

    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]) {
@@ -63,68 +147,49 @@
      filelist[filelist.length -1].origin = false
    }

    filelist = filelist.filter(item => !!(item.url || item.response))

    let vals = []

    filelist.forEach(item => {
      if (item.origin && item.url) {
        vals.push(item.url)
      } else if (!item.origin && item.status === 'done' && item.response) {
        vals.push(item.response)
      }
    })

    this.setState({filelist})
    this.props.onChange(filelist)

    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(','))
    }
  }

  onDelete = (msg) => {
  onFail = (msg) => {
    let filelist = this.state.filelist.map(item => {
      if (!item.url && !item.response && !item.status) {
        item.status = 'error'
      }
      return item
    })
    this.setState({filelist, showprogress: false})
    this.props.onChange(filelist)

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

    notification.warning({
      top: 92,
      message: msg || '文件上传失败！',
      duration: 5
    })
  }

  shardupload = (params) => {
    let param = params.chunks.shift()
    let form = new FormData()

    form.append('file', param.binary)
    form.append('fileMd5', params.file.fileMd5)
    form.append('shardingMd5', param.chunkMd5)
    form.append('baseDomain', service)
    form.append('rootPath', 'Content/images/upload/')
    form.append('fileName', params.file.fileName)
    form.append('fileExt', params.file.fileType)
    form.append('shardingCnt', param.chunks)
    form.append('shardingNo', param.chunk)

    Api.getLargeFileUpload(form).then(res => {
      if (res.status) {
        if (params.chunks.length > 0) {
          this.setState({
            percent: Math.floor(100 * (param.chunk / param.chunks))
          })
          this.shardupload(params)
        } else {
          if (res.urlPath) {
            this.onUpdate(res.urlPath)
          } else {
            this.onDelete()
          }
          this.setState({
            percent: 100
          }, () => {
            setTimeout(() => {
              this.setState({
                showprogress: false,
                percent: 0
              })
            }, 200)
          })
        }
      } else {
        this.onDelete(res.message)
      }
    })
  }

@@ -139,24 +204,31 @@
  }

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

    if (accept && file.name) {
      let types = accept.split(',')
    if (accepts && file.name) {
      let pass = false
      types.forEach(type => {
      accepts.forEach(type => {
        if (new RegExp(type + '$', 'ig').test(file.name)) {
          pass = true
        }
      })
      
      if (!pass) {
        notification.warning({
          top: 92,
          message: '文件格式错误！',
          duration: 5
        })
        return
        setTimeout(() => {
          this.onFail('文件格式错误！')
        }, 10)
        return false
      }
    }
    if (maxSize) {
      let fileSize = file.size / 1024 / 1024

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

@@ -165,96 +237,160 @@
      percent: 0
    })

    // 兼容性的处理
    let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
    let chunkSize = 1024 * 1024 * 2                // 切片每次2M
    let chunks = Math.ceil(file.size / chunkSize)  // 切片总数
    let currentChunk = 0                           // 当前上传的chunk
    let spark = new SparkMD5.ArrayBuffer()         // 对arrayBuffer数据进行md5加密，产生一个md5字符串
    let chunkFileReader = new FileReader()         // 用于计算出每个chunkMd5
    let totalFileReader = new FileReader()         // 用于计算出总文件的fileMd5
    let params = {chunks: [], file: {}}            // 用于上传所有分片的md5信息
    let file_name = file.name

    params.file.fileName = file.name.replace(/\.{1}[^.]*$/ig, '')  // 文件名（去除后缀名）
    params.file.fileType = file.name.replace(/^.*\.{1}/ig, '')     // 文件类型
    params.file.fileSize = file.size                               // 文件大小
    params.file.fileChunks = chunks                                // 记录所有chunks的长度
    if (compress === 'true' || compress === 'base64') {
      let reader = new FileReader()
      let fileSize = file.size / 1024 / 1024
      let compressRate = 0.9

    if (!/^[A-Za-z0-9]+$/.test(params.file.fileName)) {            // 文件名称含有英文及数字之外字符时，名称系统生成
      params.file.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid()
    }
      if (fileSize / limit > 5) {
        compressRate = 0.4
      } else if (fileSize / limit > 4) {
        compressRate = 0.5
      } else if (fileSize / limit > 3) {
        compressRate = 0.6
      } else if (fileSize / limit > 2) {
        compressRate = 0.7
      } else if (fileSize > limit) {
        compressRate = 0.8
      }

    totalFileReader.readAsArrayBuffer(file)
    totalFileReader.onload = (e) => {   // 对整个totalFile生成md5
      spark.append(e.target.result)
      params.file.fileMd5 = spark.end() // 计算整个文件的fileMd5
      reader.onload = (e) => {
        let img = new Image()
        let maxW = 640
 
        img.onload = () => {
          let cvs = document.createElement( 'canvas')
          let ctx = cvs.getContext( '2d')
    
          if (img.width > maxW) {
            img.height *= maxW / img.width
            img.width = maxW
          }
  
          cvs.width = img.width
          cvs.height = img.height
  
          ctx.clearRect(0, 0, cvs.width, cvs.height)
          ctx.drawImage(img, 0, 0, img.width, img.height)

      let _param = new FormData()
      _param.append('fileMd5', params.file.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)
          })
        } else if (res.shardings && res.shardings.length > 0) {
          res.shardings.forEach(shard => {
            if (shard.shardingNo && parseInt(shard.shardingNo) > currentChunk) {
              currentChunk = parseInt(shard.shardingNo)
          let param = {Base64Img: cvs.toDataURL('image/jpeg', compressRate)}

          if (this.props.config.compress === 'base64') {
            this.onUpdate(param.Base64Img, file_name)
  
            this.setState({
              percent: 100
            }, () => {
              setTimeout(() => {
                this.setState({
                  showprogress: false,
                  percent: 0
                })
              }, 200)
            })
          } else {
            if (rduri) {
              param.rduri = rduri
            }
          })
          loadNext()
  
            Api.fileuploadbase64(param).then(result => {
              if (result.status && result.Images) {
                let url = window.GLOB.baseurl + result.Images
  
                if (rduri) {
                  url = rduri.replace(/webapi(.*)$/, '') + result.Images
                }
  
                this.onUpdate(url, file_name)
  
                this.setState({
                  percent: 100
                }, () => {
                  setTimeout(() => {
                    this.setState({
                      showprogress: false,
                      percent: 0
                    })
                  }, 200)
                })
              } else {
                this.onFail(result.message)
              }
            })
          }
        }

        img.onerror = () => {
          this.onFail('图片读取失败！')
        }
    
        img.src = e.target.result
      }

      reader.onerror = () => {
        this.onFail('文件读取失败！')
      }

      reader.readAsDataURL(file)
      return false
    } else if (compress === 'oss') {
      let _param = new FormData()
      _param.append('multipartFile', file)
      _param.append('userId', sessionStorage.getItem('UserID') || '')

      Api.fileOssUpload(_param).then(res => {
        if (res.status) {
          if (res.urlPath) {
            let path = (/^\/\//.test(res.urlPath) ? 'https:' : '') + res.urlPath
            this.onUpdate(path, file_name)
            this.setState({
              percent: 100
            }, () => {
              setTimeout(() => {
                this.setState({
                  showprogress: false,
                  percent: 0
                })
              }, 200)
            })
          } else {
            this.onFail('文件上传失败！')
          }
        } else {
          loadNext()
          this.onFail(res.message || '文件上传失败！')
        }
      })

      return false
    }

    chunkFileReader.onload = (e) => {
      spark.append(e.target.result)      // 对每一片分片进行md5加密
      
      params.chunks[params.chunks.length - 1].chunkMd5 = spark.end() // 添加切片md5
      
      currentChunk++  // 每一次分片onload,currentChunk都需要增加，以便来计算分片的次数
    let form = new FormData()

      if (currentChunk < chunks) { // 当前切片总数没有达到总数时
        loadNext()
    form.append('file', file)

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

    chunkFileReader.onerror = () => {
      this.onDelete()
      console.warn('File reading failed.')
    }
    totalFileReader.onerror = () => {
      this.onDelete()
    }

    let loadNext = () => {
      let start = currentChunk * chunkSize              // 计算分片的起始位置
      let end = Math.min(file.size, start + chunkSize)  // 计算分片的结束位置

      let obj = {                                       // 每一个分片需要包含的信息
        chunk: currentChunk + 1,
        binary: file.slice(start, end),
        start: start,
        end: end,
        chunks
      }

      params.chunks.push(obj)
      chunkFileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
    }
    })

    return false
  }
@@ -269,12 +405,11 @@
  }

  render() {
    const { maxFile, fileType, accept } = this.props
    const { showprogress, percent, filelist } = this.state
    const { showprogress, percent, filelist, maxFile, fileType, accept } = this.state

    let uploadable = 'fileupload-form-container '

    if (maxFile && maxFile > 0 && filelist.length >= maxFile) {
    if (maxFile && filelist.length >= maxFile) {
      uploadable += 'limit-fileupload'
    }

@@ -284,7 +419,7 @@
      listType: fileType,
      fileList: filelist,
      action: null,
      accept: accept || '',
      accept: accept,
      method: 'post',
      multiple: false,
      onChange: this.onChange,
@@ -296,10 +431,10 @@
    return (
      <Upload {...props}>
        {fileType !== 'picture-card' ? <Button>
          <Icon type="upload" /> 点击上传
          <UploadOutlined /> 点击上传
        </Button> : null}
        {fileType === 'picture-card' ? <span style={{whiteSpace: 'nowrap'}}>
          <Icon type="upload" /> 点击上传
          <UploadOutlined /> 点击上传
        </span> : null}
        {showprogress ? <Progress percent={percent} size="small" /> : null}
      </Upload>