From 48a18736c461ad730bd264b0ac7b40b68a0e33a1 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 28 六月 2020 20:30:20 +0800
Subject: [PATCH] 2020-06-28
---
src/tabviews/zshare/fileupload/index.jsx | 237 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 162 insertions(+), 75 deletions(-)
diff --git a/src/tabviews/zshare/fileupload/index.jsx b/src/tabviews/zshare/fileupload/index.jsx
index 479a886..df7e480 100644
--- a/src/tabviews/zshare/fileupload/index.jsx
+++ b/src/tabviews/zshare/fileupload/index.jsx
@@ -1,13 +1,21 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Upload, message, Button, Icon, Progress, notification } from 'antd'
-import md5 from 'md5'
+import { fromJS } from 'immutable'
+import { Upload, Button, Icon, Progress, notification } from 'antd'
+import SparkMD5 from 'spark-md5'
import Api from '@/api'
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
}
class FileUpload extends Component {
@@ -21,18 +29,6 @@
baseUrl: Url,
percent: 0,
showprogress: false
- }
-
- init = async () => {
- try {
- const OSSData = await this.mockGetOSSData()
-
- this.setState({
- OSSData
- })
- } catch (error) {
- message.error(error)
- }
}
onChange = ({ fileList }) => {
@@ -53,89 +49,180 @@
}
}
+ 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])
+ }
+
+ this.setState({
+ showprogress: false
+ })
+
+ notification.warning({
+ top: 92,
+ message: msg || '鏂囦欢涓婁紶澶辫触锛�',
+ duration: 5
+ })
+ }
+
getExtraData = () => {
return {
RootPath: 'Content/images/upload/'
}
}
- shardupload = (file, shardSize, shardCount, i, fileList) => {
- let start = i * shardSize
- let end = Math.min(file.size, start + shardSize)
- // let param = {
- // file: file.slice(start, end),
- // fileMd5: md5(''),
- // shardingMd5: md5(''),
- // baseDomain: '',
- // rootPath: 'Content/images/upload/',
- // fileName: file.name,
- // fileExt: file.type.replace('image/', ''),
- // shardingCnt: shardCount,
- // shardingNo: i + 1
- // }
-
+ shardupload = (params) => {
+ let param = params.chunks.shift()
let form = new FormData()
- let pice = file.slice(start, end)
- form.append('file', pice) //slice鏂规硶鐢ㄤ簬鍒囧嚭鏂囦欢鐨勪竴閮ㄥ垎
- form.append('fileMd5', md5(file))
- form.append('shardingMd5', md5(pice))
- form.append('baseDomain', '')
+ 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', file.name)
- form.append('fileExt', file.type.replace('image/', ''))
- form.append('shardingCnt', shardCount)
- form.append('shardingNo', i + 1)
+ 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 (i < shardCount) {
- i++
-
+ if (params.chunks.length > 0) {
this.setState({
- percent: Math.floor(100 * (i / shardCount))
+ percent: Math.floor(100 * (param.chunk / param.chunks))
})
- this.shardupload(file, shardSize, shardCount, i, fileList)
+ 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 {
- fileList = fileList.filter(item => !!item.url)
- notification.warning({
- top: 92,
- message: res.message,
- duration: 5
- })
+ this.onDelete(res.message)
}
})
- // } else {
- // this.setState({
- // percent: 100
- // }, () => {
- // setTimeout(() => {
- // this.setState({
- // showprogress: false,
- // percent: 0
- // })
- // }, 200)
- // })
- // }
}
- beforeUpload = (file, fileList) => {
- let shardSize = 2 * 1024 * 1024
+ beforeUpload = (file) => {
+ this.setState({
+ showprogress: true,
+ percent: 0
+ })
- if (file.size > shardSize) {
- // this.setState({
- // showprogress: true,
- // percent: 0
- // })
- // let shardCount = Math.ceil(file.size / shardSize)
+ // 鍏煎鎬х殑澶勭悊
+ 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淇℃伅
- // this.shardupload(file, shardSize, shardCount, 0, fileList)
- // return false
- return true
- } else {
- return true
+ 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鐨勯暱搴�
+
+ totalFileReader.readAsArrayBuffer(file)
+ totalFileReader.onload = (e) => { // 瀵规暣涓猼otalFile鐢熸垚md5
+ spark.append(e.target.result)
+ params.file.fileMd5 = spark.end() // 璁＄畻鏁翠釜鏂囦欢鐨刦ileMd5
+
+ Api.getFilePreUpload({fileMd5: params.file.fileMd5}).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)
+ }
+ })
+ loadNext()
+ } else {
+ loadNext()
+ }
+ })
}
+
+ 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.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))
+ }
+
+ // loadNext()
+ return false
}
/**
@@ -164,7 +251,7 @@
fileList: value,
action: baseUrl,
method: 'post',
- multiple: true,
+ multiple: false,
onChange: this.onChange,
onRemove: this.onRemove,
data: this.getExtraData,
--
Gitblit v1.8.0