文件切片VO上传

client/src/components/Tinymce/Tinymce.vue

@@ -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>

client_h5/.env.dev

@@ -1,5 +1,5 @@
-# VITE_BASE_URL='https://oa.zjugis.com:28080'
-VITE_BASE_URL='http://10.10.10.7:18080'
+VITE_BASE_URL='https://oa.zjugis.com:28080'
+# VITE_BASE_URL='http://10.10.10.7:18080'
 # VITE_BASE_URL='http://localhost:6090/'
 
 

client_h5/src/router/index.ts

@@ -14,6 +14,8 @@ const router = createRouter({
 })
 // 路由加载前
 router.beforeEach((to, from, next) => {
+  next();
+  return;
   getUserInfoPromise(true).then((isLogin) => {
     next(); 
     if (!isLogin) {

zjugis-module-infra/zjugis-module-infra-biz/src/main/java/com/zjugis/module/infra/controller/admin/file/vo/file/FileUploadChunkReqVO.java

@@ -0,0 +1,19 @@
+package com.zjugis.module.infra.controller.admin.file.vo.file;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.Data;
+
+@Schema(description = "管理后台 - 切片上传文件 Request VO")
+@Data
+public class FileUploadChunkReqVO extends FileUploadReqVO {
+
+    @Schema(description = "文件名称", example = "zjugisyuanma.png")
+    private String name;
+
+    @Schema(description = "当前切片位置Index")
+    private Integer index;
+
+    @Schema(description = "总切片数total")
+    private Integer total;
+
+}