~jinfei/pc-plat.git

			@@ -1,92 +1,165 @@
			import React, {Component} from 'react'
			import PropTypes from 'prop-types'
			import { fromJS } from 'immutable'
			import { is, 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, // 按钮信息、表单列表
			maxFile: PropTypes.any, // 最大文件数
			fileType: PropTypes.string // 文件显示类型
			config: PropTypes.object, // 表单信息
			onChange: PropTypes.func, // 表单变化
			}

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

			onChange = ({ fileList }) => {
			const { onChange } = this.props
			UNSAFE_componentWillMount () {
			const { config } = this.props

			if (onChange) {
			onChange([...fileList])
			let filelist = []
			if (config.initval) {
			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 = []
			}
			}
			}

			onRemove = file => {
			const { value, onChange } = this.props

			const files = value.filter(v => v.url !== file.url)

			if (onChange) {
			onChange(files)
			let accept = ''
			let accepts = null
			let compress = false
			if (config.compress === 'true') {
			compress = true
			accepts = ['.jpg', '.png', '.gif', '.jpeg']
			accept = accepts.join(',')
			} else if (config.suffix) {
			accepts = config.suffix.split(',').map(item => {
			if (!/^\./ig.test(item)) {
			item = '.' + item
			}
			return item
			})
			accept = accepts.join(',')
			}
			}

			onUpdate = (url) => {
			const { value, onChange } = this.props

			let filelist = fromJS(value).toJS()
			filelist[filelist.length -1].status = 'done'
			filelist[filelist.length -1].response = url
			filelist[filelist.length -1].origin = false

			if (onChange) {
			onChange([...filelist])
			}
			}

			onDelete = (msg) => {
			const { value, onChange } = this.props
			let filelist = value.filter(v => !v.url && !v.response)

			if (onChange) {
			onChange([...filelist])
			let rduri = config.rduri \|\| ''

			if (window.GLOB.systemType === 'production') {
			rduri = config.proRduri \|\| ''
			}

			this.setState({
			showprogress: false
			rduri,
			accept,
			accepts,
			filelist,
			compress,
			limit: config.limit \|\| 2,
			maxFile: config.maxfile && config.maxfile > 0 ? config.maxfile : null,
			fileType: config.fileType \|\| 'text'
			})
			}

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

			onChange = ({ fileList }) => {
			fileList = fileList.map(item => {
			if (item.status === 'error' && /^<!DOCTYPE html>/.test(item.response)) {
			item.response = ''
			}
			return item
			})

			this.setState({filelist: fileList})
			}

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

			this.setState({filelist: 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) => {
			let filelist = fromJS(this.state.filelist).toJS()

			if (filelist[filelist.length -1]) {
			filelist[filelist.length -1].status = 'done'
			filelist[filelist.length -1].response = url
			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(vals.join(','))
			}

			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, percent: 0})

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

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

			shardupload = (params) => {
			@@ -102,6 +175,8 @@
			form.append('fileExt', params.file.fileType)
			form.append('shardingCnt', param.chunks)
			form.append('shardingNo', param.chunk)
			form.append('LoginUID', sessionStorage.getItem('LoginUID') \|\| '')
			form.append('UserID', sessionStorage.getItem('UserID') \|\| '')

			Api.getLargeFileUpload(form).then(res => {
			if (res.status) {
			@@ -114,7 +189,7 @@
			if (res.urlPath) {
			this.onUpdate(res.urlPath)
			} else {
			this.onDelete()
			this.onFail()
			}
			this.setState({
			percent: 100
			@@ -128,16 +203,127 @@
			})
			}
			} else {
			this.onDelete(res.message)
			this.onFail(res.message)
			}
			})
			}

			getuuid = () => {
			let uuid = []
			let _options = '0123456789abcdefghigklmnopqrstuv'
			for (let i = 0; i < 19; i++) {
			uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
			}
			uuid = uuid.join('')
			return uuid
			}

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

			if (accepts && file.name) {
			let pass = false
			accepts.forEach(type => {
			if (new RegExp(type + '$', 'ig').test(file.name)) {
			pass = true
			}
			})

			if (!pass) {
			setTimeout(() => {
			this.onFail('文件格式错误！')
			}, 10)
			return false
			}
			}

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

			if (compress) {
			let reader = new FileReader()
			let fileSize = file.size / 1024 / 1024
			let compressRate = 0.9

			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
			}

			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 = {Base64Img: cvs.toDataURL('image/jpeg', compressRate)}

			if (rduri) {
			param.rduri = rduri
			}

			Api.fileuploadbase64(param).then(result => {
			if (result.status && result.Images) {
			let url = service + result.Images

			if (rduri) {
			url = rduri.replace(/webapi(.*)$/, '') + result.Images
			}

			this.onUpdate(url)

			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
			}

			// 兼容性的处理
			let blobSlice = File.prototype.slice \|\| File.prototype.mozSlice \|\| File.prototype.webkitSlice
			@@ -155,7 +341,7 @@
			params.file.fileChunks = chunks // 记录所有chunks的长度

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

			totalFileReader.readAsArrayBuffer(file)
			@@ -207,11 +393,10 @@
			}

			chunkFileReader.onerror = () => {
			this.onDelete()
			console.warn('File reading failed.')
			this.onFail('文件读取失败！')
			}
			totalFileReader.onerror = () => {
			this.onDelete()
			this.onFail('文件读取失败！')
			}

			let loadNext = () => {
			@@ -230,7 +415,6 @@
			chunkFileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
			}

			// loadNext()
			return false
			}

			@@ -244,35 +428,37 @@
			}

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

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

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

			const props = {
			name: 'file',
			disabled: showprogress,
			listType: fileType,
			fileList: value,
			action: baseUrl,
			fileList: filelist,
			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>
			)