|
@@ -1,6 +1,11 @@
|
|
|
<template>
|
|
|
<div class="prefixCls" :style="{ width: containerWidth }">
|
|
|
<textarea :id="tinymceId" ref="elRef" :style="{ visibility: 'hidden' }"></textarea>
|
|
|
+ <div class="process_loading" v-show="loading">
|
|
|
+ <div class="progress_box">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="16" :percentage="percentage" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -55,6 +60,8 @@ import { toolbar, plugins } from './tinymce'
|
|
|
import { nextTick, onMounted, onActivated } from 'vue'
|
|
|
import { bindHandlers } from './helper'
|
|
|
|
|
|
+const loading = ref(false)
|
|
|
+const percentage = ref(0)
|
|
|
const toString = Object.prototype.toString
|
|
|
function is(val, type) {
|
|
|
return toString.call(val) === `[object ${type}]`
|
|
@@ -190,19 +197,51 @@ const initOptions = computed(() => {
|
|
|
input.setAttribute('type', 'file')
|
|
|
input.setAttribute('accept', '.mp4')
|
|
|
input.onchange = function () {
|
|
|
- let file = this.files[0]
|
|
|
- const url = import.meta.env.VITE_UPLOAD_URL
|
|
|
- const formData = new FormData()
|
|
|
- const arr = file.name.split('.')
|
|
|
- if (arr.length > 1) {
|
|
|
- const suffix = arr[arr.length - 1]
|
|
|
- formData.append('path', `${buildUUID()}.${suffix}`)
|
|
|
+ const file = this.files[0]
|
|
|
+ const size = file.size
|
|
|
+ const CHUNK_SIZE = 1024 * 1024 * 5 //上传每块的大小5M
|
|
|
+ let index = 0
|
|
|
+ const total = Math.ceil(size / CHUNK_SIZE)
|
|
|
+ const load_size = 100 / total
|
|
|
+ function uploadChunkFile(file) {
|
|
|
+ if (size > 0 && index <= total - 1) {
|
|
|
+ const chunk = file.slice(
|
|
|
+ index * CHUNK_SIZE,
|
|
|
+ index === total - 1 ? size : (index + 1) * CHUNK_SIZE
|
|
|
+ )
|
|
|
+ const url = `/infra/file/chunk/upload`
|
|
|
+
|
|
|
+ const formData = new FormData()
|
|
|
+ const arr = file.name.split('.')
|
|
|
+ if (arr.length > 1) {
|
|
|
+ const suffix = arr[arr.length - 1]
|
|
|
+ formData.append('path', `${buildUUID()}.${suffix}`)
|
|
|
+ }
|
|
|
+ formData.append('name', file.name)
|
|
|
+ formData.append('index', index)
|
|
|
+ formData.append('total', total)
|
|
|
+ formData.append('file', chunk)
|
|
|
+ formData.append('clientId', import.meta.env.VITE_UPLOAD_CLIENT_ID)
|
|
|
+ request
|
|
|
+ .upload({ url: url, data: formData })
|
|
|
+ .then((result) => {
|
|
|
+ if (result.data == '1') {
|
|
|
+ index = index + 1
|
|
|
+ percentage.value = parseInt(load_size * index)
|
|
|
+ uploadChunkFile(file)
|
|
|
+ } else if (result.data != '-1') {
|
|
|
+ percentage.value = 100
|
|
|
+ loading.value = false
|
|
|
+ callback(result['data'])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ // loading.value = false
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
- formData.append('file', file)
|
|
|
- formData.append('clientId', import.meta.env.VITE_UPLOAD_CLIENT_ID)
|
|
|
- request.upload({ url: url, data: formData }).then((result) => {
|
|
|
- callback(result['data'])
|
|
|
- })
|
|
|
+ loading.value = true
|
|
|
+ uploadChunkFile(file)
|
|
|
}
|
|
|
input.click()
|
|
|
}
|
|
@@ -379,4 +418,27 @@ textarea {
|
|
|
z-index: -1;
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
+.process_loading {
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ margin: auto;
|
|
|
+ max-width: 480px;
|
|
|
+ width: 48rem;
|
|
|
+ height: 248px;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ z-index: 99999999;
|
|
|
+ > .progress_box {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ margin: auto;
|
|
|
+ width: 80%;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|