From 38b5297cbfbe3d61ee2e800b51e8324ee163f43e Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 18 一月 2021 12:24:50 +0800
Subject: [PATCH] 2021-01-18
---
src/components/editor/index.jsx | 186 +++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 181 insertions(+), 5 deletions(-)
diff --git a/src/components/editor/index.jsx b/src/components/editor/index.jsx
index 58bfb60..b7745fe 100644
--- a/src/components/editor/index.jsx
+++ b/src/components/editor/index.jsx
@@ -1,14 +1,25 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
+import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import 'braft-extensions/dist/table.css'
-import BraftEditor from 'braft-editor'
+import 'braft-editor/dist/output.css'
import Table from 'braft-extensions/dist/table'
+import SparkMD5 from 'spark-md5'
+import moment from 'moment'
+import Api from '@/api'
import './index.scss'
BraftEditor.use(Table())
+
+let service = ''
+if (process.env.NODE_ENV === 'production') {
+ service = document.location.origin + '/' + window.GLOB.service
+} else {
+ service = window.GLOB.location + '/' + window.GLOB.service
+}
class NormalEditor extends Component {
static propTpyes = {
@@ -16,23 +27,188 @@
value: PropTypes.any, // 鏉＄爜鍊�
}
+ state = {
+ editorState: ''
+ }
+
+ UNSAFE_componentWillMount () {
+ let initVal = null
+
+ if (this.props['data-__meta']) {
+ initVal = this.props['data-__meta'].initialValue || null
+ }
+
+ this.setState({editorState: BraftEditor.createEditorState(initVal)})
+ }
shouldComponentUpdate (nextProps, nextState) {
return !is(fromJS(this.props), fromJS(nextProps))
}
- handleEditorChange = () => {
-
+ handleEditorChange = (editorState) => {
+ this.setState({ editorState })
+ if (this.props.onChange) {
+ this.props.onChange(editorState.toHTML())
+ }
}
- submitContent = () => {
+ shardupload = (params, param) => {
+ let _param = params.chunks.shift()
+ 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('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)
+
+ Api.getLargeFileUpload(form).then(res => {
+ if (res.status) {
+ if (params.chunks.length > 0) {
+ param.progress(Math.floor(100 * (_param.chunk / _param.chunks)))
+ this.shardupload(params, param)
+ } else {
+ if (res.urlPath) {
+ param.success({
+ url: res.urlPath
+ })
+ } else {
+ param.error({
+ url: '涓婁紶澶辫触锛�'
+ })
+ }
+ }
+ } else {
+ param.error({
+ url: '涓婁紶澶辫触锛�'
+ })
+ }
+ })
+ }
+
+ 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
+ }
+
+ handleUpload(param) {
+ const file = param.file
+
+ 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淇℃伅
+
+ 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鐨勯暱搴�
+
+ if (!/^[A-Za-z0-9]+$/.test(params.file.fileName)) { // 鏂囦欢鍚嶇О鍚湁鑻辨枃鍙婃暟瀛椾箣澶栧瓧绗︽椂锛屽悕绉扮郴缁熺敓鎴�
+ params.file.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
+
+ let _param = new FormData()
+ _param.append('fileMd5', params.file.fileMd5)
+
+ Api.getFilePreUpload(_param).then(res => {
+ if (res.status && res.urlPath) {
+ param.success({
+ url: res.urlPath
+ })
+ } 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, param)
+ }
+ }
+
+ chunkFileReader.onerror = () => {
+ param.error({
+ url: '涓婁紶澶辫触锛�'
+ })
+ console.warn('File reading failed.')
+ }
+ totalFileReader.onerror = () => {
+ param.error({
+ url: '涓婁紶澶辫触锛�'
+ })
+ }
+
+ 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))
+ }
}
render() {
+ const { editorState } = this.state
return (
<div className="normal-braft-editor">
- <BraftEditor value={'<p></p>'} onChange={this.handleEditorChange} onSave={this.submitContent}/>
+ <BraftEditor
+ value={editorState}
+ onChange={this.handleEditorChange}
+ media={{
+ uploadFn: (param) => {
+ this.handleUpload(param)
+ },
+ validate: () => {
+ return true
+ },
+ onInsert: () => {
+
+ }
+ }}
+ />
</div>
)
}
--
Gitblit v1.8.0