From cb9ade2afd2a367ad767bc605ab7086c695dd010 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 09 十二月 2022 15:53:32 +0800
Subject: [PATCH] 2022-12-09
---
src/tabviews/zshare/fileupload/index.jsx | 282 +++++++++++++++++++++++++++++---------------------------
1 files changed, 145 insertions(+), 137 deletions(-)
diff --git a/src/tabviews/zshare/fileupload/index.jsx b/src/tabviews/zshare/fileupload/index.jsx
index 1e71103..cb0be7b 100644
--- a/src/tabviews/zshare/fileupload/index.jsx
+++ b/src/tabviews/zshare/fileupload/index.jsx
@@ -8,13 +8,6 @@
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
-}
-
class FileUpload extends Component {
static propTpyes = {
config: PropTypes.object, // 琛ㄥ崟淇℃伅
@@ -28,9 +21,10 @@
maxFile: null,
rduri: '',
limit: 2,
- compress: false,
+ compress: 'false',
fileType: 'text',
showprogress: false,
+ maxSize: 0,
filelist: []
}
@@ -39,28 +33,41 @@
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 = []
+ 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 = []
+ }
}
}
let accept = ''
let accepts = null
- let compress = false
- if (config.compress === 'true') {
- compress = true
+ 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)) {
@@ -83,7 +90,8 @@
filelist,
compress,
limit: config.limit || 2,
- maxFile: config.maxfile && config.maxfile > 0 ? config.maxfile : null,
+ maxSize: config.maxSize || 0,
+ maxFile: maxFile,
fileType: config.fileType || 'text'
})
}
@@ -163,46 +171,38 @@
})
}
- shardupload = (params) => {
- let param = params.chunks.shift()
+ shardupload = (param) => {
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('fileMd5', param.fileMd5)
+ form.append('shardingMd5', param.fileMd5)
+ form.append('baseDomain', window.GLOB.baseurl)
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)
+ 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 (params.chunks.length > 0) {
- this.setState({
- percent: Math.floor(100 * (param.chunk / param.chunks))
- })
- this.shardupload(params)
+ if (res.urlPath) {
+ this.onUpdate(res.urlPath)
} else {
- if (res.urlPath) {
- this.onUpdate(res.urlPath)
- } else {
- this.onFail()
- }
- this.setState({
- percent: 100
- }, () => {
- setTimeout(() => {
- this.setState({
- showprogress: false,
- percent: 0
- })
- }, 200)
- })
+ this.onFail()
}
+ this.setState({
+ percent: 100
+ }, () => {
+ setTimeout(() => {
+ this.setState({
+ showprogress: false,
+ percent: 0
+ })
+ }, 200)
+ })
} else {
this.onFail(res.message)
}
@@ -220,7 +220,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
@@ -237,13 +237,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
})
- if (compress) {
+ if (compress === 'true' || compress === 'base64') {
let reader = new FileReader()
let fileSize = file.size / 1024 / 1024
let compressRate = 0.9
@@ -281,34 +291,49 @@
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)
+ if (this.props.config.compress === 'base64') {
+ this.onUpdate(param.Base64Img)
+
+ this.setState({
+ percent: 100
+ }, () => {
+ setTimeout(() => {
+ this.setState({
+ showprogress: false,
+ percent: 0
+ })
+ }, 200)
+ })
+ } else {
+ if (rduri) {
+ param.rduri = rduri
}
- })
+
+ 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)
+
+ this.setState({
+ percent: 100
+ }, () => {
+ setTimeout(() => {
+ this.setState({
+ showprogress: false,
+ percent: 0
+ })
+ }, 200)
+ })
+ } else {
+ this.onFail(result.message)
+ }
+ })
+ }
}
img.onerror = () => {
@@ -324,34 +349,57 @@
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)
+ this.setState({
+ percent: 100
+ }, () => {
+ setTimeout(() => {
+ this.setState({
+ showprogress: false,
+ percent: 0
+ })
+ }, 200)
+ })
+ } else {
+ this.onFail('鏂囦欢涓婁紶澶辫触锛�')
+ }
+ } else {
+ this.onFail(res.message || '鏂囦欢涓婁紶澶辫触锛�')
+ }
+ })
+
+ return false
}
// 鍏煎鎬х殑澶勭悊
- 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 // 褰撳墠涓婁紶鐨刢hunk
let spark = new SparkMD5.ArrayBuffer() // 瀵筧rrayBuffer鏁版嵁杩涜md5鍔犲瘑锛屼骇鐢熶竴涓猰d5瀛楃涓�
- let chunkFileReader = new FileReader() // 鐢ㄤ簬璁＄畻鍑烘瘡涓猚hunkMd5
let totalFileReader = new FileReader() // 鐢ㄤ簬璁＄畻鍑烘�绘枃浠剁殑fileMd5
- let params = {chunks: [], file: {}} // 鐢ㄤ簬涓婁紶鎵�鏈夊垎鐗囩殑md5淇℃伅
+ let param = {}
- 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 // 璁板綍鎵�鏈塩hunks鐨勯暱搴�
+ param.fileName = file.name.replace(/\.{1}[^.]*$/ig, '') // 鏂囦欢鍚嶏紙鍘婚櫎鍚庣紑鍚嶏級
+ param.fileType = file.name.replace(/^.*\.{1}/ig, '') // 鏂囦欢绫诲瀷
- if (!/^[A-Za-z0-9]+$/.test(params.file.fileName)) { // 鏂囦欢鍚嶇О鍚湁鑻辨枃鍙婃暟瀛椾箣澶栧瓧绗︽椂锛屽悕绉扮郴缁熺敓鎴�
- params.file.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid()
+ if (!/^[A-Za-z0-9]+$/.test(param.fileName)) { // 鏂囦欢鍚嶇О鍚湁鑻辨枃鍙婃暟瀛椾箣澶栧瓧绗︽椂锛屽悕绉扮郴缁熺敓鎴�
+ param.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid()
}
totalFileReader.readAsArrayBuffer(file)
totalFileReader.onload = (e) => { // 瀵规暣涓猼otalFile鐢熸垚md5
spark.append(e.target.result)
- params.file.fileMd5 = spark.end() // 璁＄畻鏁翠釜鏂囦欢鐨刦ileMd5
+ param.fileMd5 = spark.end() // 璁＄畻鏁翠釜鏂囦欢鐨刦ileMd5
+ param.binary = file
let _param = new FormData()
- _param.append('fileMd5', params.file.fileMd5)
+ _param.append('fileMd5', param.fileMd5)
Api.getFilePreUpload(_param).then(res => {
if (res.status && res.urlPath) {
@@ -366,54 +414,14 @@
})
}, 200)
})
- } else if (res.shardings && res.shardings.length > 0) {
- res.shardings.forEach(shard => {
- if (shard.shardingNo && parseInt(shard.shardingNo) > currentChunk) {
- currentChunk = parseInt(shard.shardingNo)
- }
- })
- loadNext()
} else {
- loadNext()
+ this.shardupload(param)
}
})
}
- chunkFileReader.onload = (e) => {
- spark.append(e.target.result) // 瀵规瘡涓�鐗囧垎鐗囪繘琛宮d5鍔犲瘑
-
- params.chunks[params.chunks.length - 1].chunkMd5 = spark.end() // 娣诲姞鍒囩墖md5
-
- currentChunk++ // 姣忎竴娆″垎鐗噊nload,currentChunk閮介渶瑕佸鍔狅紝浠ヤ究鏉ヨ绠楀垎鐗囩殑娆℃暟
-
- if (currentChunk < chunks) { // 褰撳墠鍒囩墖鎬绘暟娌℃湁杈惧埌鎬绘暟鏃�
- loadNext()
- } else {
- this.shardupload(params)
- }
- }
-
- chunkFileReader.onerror = () => {
- this.onFail('鏂囦欢璇诲彇澶辫触锛�')
- }
totalFileReader.onerror = () => {
this.onFail('鏂囦欢璇诲彇澶辫触锛�')
- }
-
- 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
--
Gitblit v1.8.0