2021-01-15

king

2021-01-15 40436544f55558d2c8d1c14c68cce79546c60dff

 src/tabviews/zshare/fileupload/index.jsx

@@ -1,32 +1,29 @@
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 Utils from '@/utils/utils.js'
import './index.scss'

let Url = '/Upload'
if (process.env.NODE_ENV === 'production') {
  Url = document.location.origin + '/' + window.GLOB.service + 'zh-CN/Home/Upload'
}

let service = ''
if (process.env.NODE_ENV === 'production') {
  service = document.location.origin + '/' + window.GLOB.service
} else {
  service = window.GLOB.location + window.GLOB.service
  service = window.GLOB.location + '/' + window.GLOB.service
}

class FileUpload extends Component {
  static propTpyes = {
    value: PropTypes.array,    // 按钮信息、表单列表
    value: PropTypes.array,    // 文件数组
    accept: PropTypes.any,     // 文件格式
    maxFile: PropTypes.any,    // 最大文件数
    fileType: PropTypes.string // 文件显示类型
  }

  state = {
    baseUrl: Url,
    percent: 0,
    showprogress: false
  }
@@ -81,12 +78,6 @@
    })
  }

  getExtraData = () => {
    return {
      RootPath: 'Content/images/upload/'
    }
  }

  shardupload = (params) => {
    let param = params.chunks.shift()
    let form = new FormData()
@@ -132,6 +123,27 @@
  }

  beforeUpload = (file) => {
    const { accept } = this.props

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

    this.setState({
      showprogress: true,
      percent: 0
@@ -152,12 +164,19 @@
    params.file.fileSize = file.size                               // 文件大小
    params.file.fileChunks = chunks                                // 记录所有chunks的长度

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

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

      Api.getFilePreUpload({fileMd5: params.file.fileMd5}).then(res => {
      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({
@@ -221,7 +240,6 @@
      chunkFileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
    }

    // loadNext()
    return false
  }

@@ -235,13 +253,13 @@
  }

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

    let uploadable = ''
    let uploadable = 'fileupload-form-container '

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

    const props = {
@@ -249,21 +267,24 @@
      disabled: showprogress,
      listType: fileType,
      fileList: value,
      action: baseUrl,
      action: null,
      accept: accept || '',
      method: 'post',
      multiple: false,
      onChange: this.onChange,
      onRemove: this.onRemove,
      data: this.getExtraData,
      beforeUpload: this.beforeUpload,
      className: uploadable
    }

    return (
      <Upload {...props}>
        <Button>
        {fileType !== 'picture-card' ? <Button>
          <Icon type="upload" /> 点击上传
        </Button>
        </Button> : null}
        {fileType === 'picture-card' ? <span style={{whiteSpace: 'nowrap'}}>
          <Icon type="upload" /> 点击上传
        </span> : null}
        {showprogress ? <Progress percent={percent} size="small" /> : null}
      </Upload>
    )