From d3a618f09ab510de5c4ca772c44f60c218b61964 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期六, 18 九月 2021 15:12:30 +0800
Subject: [PATCH] 2021-09-18
---
src/tabviews/zshare/fileupload/index.jsx | 285 +++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 225 insertions(+), 60 deletions(-)
diff --git a/src/tabviews/zshare/fileupload/index.jsx b/src/tabviews/zshare/fileupload/index.jsx
index e42c173..3ef6469 100644
--- a/src/tabviews/zshare/fileupload/index.jsx
+++ b/src/tabviews/zshare/fileupload/index.jsx
@@ -1,6 +1,6 @@
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'
@@ -16,59 +16,144 @@
class FileUpload extends Component {
static propTpyes = {
- value: PropTypes.array, // 鏂囦欢鏁扮粍
- accept: PropTypes.any, // 鏂囦欢鏍煎紡
- maxFile: PropTypes.any, // 鏈�澶ф枃浠舵暟
- fileType: PropTypes.string // 鏂囦欢鏄剧ず绫诲瀷
+ config: PropTypes.object, // 琛ㄥ崟淇℃伅
+ onChange: PropTypes.func, // 琛ㄥ崟鍙樺寲
}
state = {
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,
@@ -90,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) {
@@ -102,7 +189,7 @@
if (res.urlPath) {
this.onUpdate(res.urlPath)
} else {
- this.onDelete()
+ this.onFail()
}
this.setState({
percent: 100
@@ -116,7 +203,7 @@
})
}
} else {
- this.onDelete(res.message)
+ this.onFail(res.message)
}
})
}
@@ -132,24 +219,21 @@
}
beforeUpload = (file) => {
- const { accept } = this.props
+ const { accepts, compress, limit, rduri } = 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
}
}
@@ -157,6 +241,89 @@
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
@@ -226,11 +393,10 @@
}
chunkFileReader.onerror = () => {
- this.onDelete()
- console.warn('File reading failed.')
+ this.onFail('鏂囦欢璇诲彇澶辫触锛�')
}
totalFileReader.onerror = () => {
- this.onDelete()
+ this.onFail('鏂囦欢璇诲彇澶辫触锛�')
}
let loadNext = () => {
@@ -262,12 +428,11 @@
}
render() {
- const { value, maxFile, fileType, accept } = this.props
- const { showprogress, percent } = this.state
+ const { showprogress, percent, filelist, maxFile, fileType, accept } = this.state
let uploadable = 'fileupload-form-container '
- if (maxFile && maxFile > 0 && value && value.length >= maxFile) {
+ if (maxFile && filelist.length >= maxFile) {
uploadable += 'limit-fileupload'
}
@@ -275,9 +440,9 @@
name: 'file',
disabled: showprogress,
listType: fileType,
- fileList: value,
+ fileList: filelist,
action: null,
- accept: accept || '',
+ accept: accept,
method: 'post',
multiple: false,
onChange: this.onChange,
--
Gitblit v1.8.0