From 0c62991f68093fd59d00572ddbc74d9188f711c8 Mon Sep 17 00:00:00 2001
From: Liang <545073804@qq.com>
Date: Fri, 29 Mar 2024 18:45:00 +0800
Subject: [PATCH 1/2] =?UTF-8?q?add=20=E6=96=B0=E5=A2=9E=E5=88=86=E7=89=87?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                        |   3 +
 .env.production                         |   3 +
 src/api/system/oss/index.ts             |  15 ++-
 src/api/system/oss/types.ts             |  23 ++++
 src/components/FilePartUpload/index.vue | 149 ++++++++++++++++++++++++
 src/views/system/oss/index.vue          |  11 ++
 6 files changed, 203 insertions(+), 1 deletion(-)
 create mode 100644 src/components/FilePartUpload/index.vue

diff --git a/.env.development b/.env.development
index eb5837f..57f2614 100644
--- a/.env.development
+++ b/.env.development
@@ -33,3 +33,6 @@ VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
 
 # websocket 开关
 VITE_APP_WEBSOCKET = true
+
+# 文件上传分片大小 默认5M
+VITE_FILE_UPLOAD_PART_SIZE = 5242880
diff --git a/.env.production b/.env.production
index 26844c3..6b8b9f4 100644
--- a/.env.production
+++ b/.env.production
@@ -36,3 +36,6 @@ VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
 
 # websocket 开关
 VITE_APP_WEBSOCKET = true
+
+# 文件上传分片大小 默认5M
+VITE_FILE_UPLOAD_PART_SIZE = 5242880
diff --git a/src/api/system/oss/index.ts b/src/api/system/oss/index.ts
index 4472112..94b9c80 100644
--- a/src/api/system/oss/index.ts
+++ b/src/api/system/oss/index.ts
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-import { OssQuery, OssVO } from './types';
+import { OssPartUploadVo, OssQuery, OssVO } from './types';
 import { AxiosPromise } from 'axios';
 
 // 查询OSS对象存储列表
@@ -26,3 +26,16 @@ export function delOss(ossId: string | number | Array<string | number>) {
     method: 'delete'
   });
 }
+
+// 分片上传
+export function partUpload(formData: FormData): AxiosPromise<OssPartUploadVo> {
+  return request({
+    url: '/resource/oss/part/upload',
+    method: 'post',
+    headers: {
+      // 关闭防重提交
+      repeatSubmit: false
+    },
+    data: formData
+  });
+}
diff --git a/src/api/system/oss/types.ts b/src/api/system/oss/types.ts
index bc0bc1f..817e498 100644
--- a/src/api/system/oss/types.ts
+++ b/src/api/system/oss/types.ts
@@ -20,3 +20,26 @@ export interface OssQuery extends PageQuery {
 export interface OssForm {
   file: undefined | string;
 }
+
+export interface OssPartUploadForm {
+  file: undefined | string;
+  uploadId: undefined | string;
+  fileName: undefined | string;
+  fileSize: undefined | number;
+  partNumber: undefined | number;
+  partSize: undefined | number;
+  totalParts: undefined | number;
+  needMerge: undefined | boolean;
+}
+
+export interface OssPartInfo {
+  partNumber: undefined | number;
+  eTag: undefined | string;
+}
+
+export interface OssPartUploadVo {
+  uploadId: undefined | string;
+  url: undefined | string;
+  partInfoList: undefined | Array<OssPartInfo>;
+  mergeCompleted: undefined | boolean;
+}
diff --git a/src/components/FilePartUpload/index.vue b/src/components/FilePartUpload/index.vue
new file mode 100644
index 0000000..e6dad24
--- /dev/null
+++ b/src/components/FilePartUpload/index.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <el-upload
+      class="upload-demo"
+      action="#"
+      drag
+      multiple
+      :auto-upload="false"
+      :file-list="fileList"
+      :show-file-list="true"
+      :on-change="handleChange"
+      :on-remove="handleRemove"
+    >
+      <el-icon class="el-icon--upload">
+        <upload-filled />
+      </el-icon>
+      <div class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
+      <!--      <template #tip>-->
+      <!--        <div class="el-upload__tip">-->
+      <!--          请上传大小不超过 <b style="color: #f56c6c"> 500MB</b> 的文件-->
+      <!--        </div>-->
+      <!--      </template>-->
+    </el-upload>
+    <!-- 文件列表 -->
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
+        <el-link :href="`${file.url}`" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-button type="danger" link @click="handleDelete(index)">删除</el-button>
+        </div>
+      </li>
+    </transition-group>
+  </div>
+  <el-button type="success" @click="startUpload">开始上传</el-button>
+</template>
+
+<script setup lang="ts">
+import { partUpload } from '@/api/system/oss';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+// 分片大小
+const partSize = Number(import.meta.env.VITE_FILE_UPLOAD_PART_SIZE);
+
+const state = reactive({
+  file: null, // 文件
+  uploadId: null, // uploadId 上传ID 上传第一片不需要传递，后续需要，从第一次上传的响应中取得
+  fileName: null, // 文件名（带后缀）
+  fileSize: 0, // 文件（总）大小
+  partNumber: 0, // 当前分片序号
+  totalParts: 0, // 总片数
+  fileParts: [] // 文件分片数组
+});
+
+const fileList = ref([]);
+
+// 开始上传分片
+const startUpload = () => {
+  proxy?.$modal.loading('正在上传文件，请稍候...');
+  uploadNextPart();
+  proxy?.$modal.closeLoading();
+};
+
+// 实际分片上传函数
+const uploadNextPart = () => {
+  if (state.partNumber < state.totalParts) {
+    const filePart = state.fileParts[state.partNumber];
+    const partNumber = state.partNumber + 1;
+    const formData = new FormData();
+    formData.append('file', filePart);
+    console.log('file:', filePart);
+    // 上传第一片时，uploadId是不存在的
+    if (state.uploadId) {
+      formData.append('uploadId', state.uploadId);
+    }
+    formData.append('fileName', state.fileName);
+    formData.append('fileSize', state.fileSize);
+    formData.append('partNumber', partNumber);
+    formData.append('partSize', partSize);
+    formData.append('totalParts', state.totalParts);
+    // 是否需要合并，如果已经是最后一片，则自动合并
+    formData.append('needMerge', partNumber === state.totalParts);
+
+    partUpload(formData)
+      .then((resp) => {
+        state.partNumber++;
+        if (resp.data.uploadId) {
+          state.uploadId = resp.data.uploadId;
+        }
+        if (resp.data.mergeCompleted) {
+          proxy?.$modal.msgSuccess('文件上传完成');
+        } else {
+          // 继续上传下一片
+          // 如果需要做断点或者暂停上传，可以在这里做介入
+          uploadNextPart();
+        }
+      })
+      .catch((error) => {
+        proxy?.$modal.msgError('上传文件失败');
+      });
+  }
+};
+
+// 文件发生更改时
+const handleChange = (uploadFile, uploadFiles) => {
+  stateReset();
+  state.file = uploadFile;
+  state.fileName = state.file.name;
+  state.fileSize = state.file.size;
+  const totalParts = Math.ceil(state.file.size / partSize);
+  state.totalParts = totalParts;
+  // 计算分片
+  for (let i = 0; i < totalParts; i++) {
+    const start = i * partSize;
+    const end = start + partSize >= state.file.size ? state.file.size : start + partSize;
+    const filePart = state.file.raw?.slice(start, end);
+    state.fileParts.push(filePart);
+  }
+};
+
+// 文件移除时
+const handleRemove = (uploadFile, uploadFiles) => {
+  stateReset();
+};
+
+// 重置状态
+const stateReset = () => {
+  state.file = null;
+  state.fileParts = [];
+  state.fileName = null;
+  state.fileSize = 0;
+  state.partNumber = 0;
+  state.totalParts = 0;
+};
+
+// 获取文件名称
+const getFileName = (name: string) => {
+  // 如果是url那么取最后的名字 如果不是直接返回
+  if (name.lastIndexOf('/') > -1) {
+    return name.slice(name.lastIndexOf('/') + 1);
+  } else {
+    return name;
+  }
+};
+</script>
diff --git a/src/views/system/oss/index.vue b/src/views/system/oss/index.vue
index 77c5dcd..9bf46ef 100644
--- a/src/views/system/oss/index.vue
+++ b/src/views/system/oss/index.vue
@@ -45,6 +45,9 @@
           <el-col :span="1.5">
             <el-button v-hasPermi="['system:oss:upload']" type="primary" plain icon="Upload" @click="handleImage">上传图片</el-button>
           </el-col>
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['system:oss:upload']" type="primary" plain icon="Upload" @click="handlePartFile">分片上传</el-button>
+          </el-col>
           <el-col :span="1.5">
             <el-button v-hasPermi="['system:oss:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
@@ -118,6 +121,7 @@
         <el-form-item label="文件名">
           <fileUpload v-if="type === 0" v-model="form.file" />
           <imageUpload v-if="type === 1" v-model="form.file" />
+          <filePartUpload v-if="type === 2" v-model="form.file" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -295,6 +299,13 @@ const handleImage = () => {
   dialog.visible = true;
   dialog.title = '上传图片';
 };
+/** 分片上传按钮操作 */
+const handlePartFile = () => {
+  reset();
+  type.value = 2;
+  dialog.visible = true;
+  dialog.title = '分片上传';
+};
 /** 提交按钮 */
 const submitForm = () => {
   dialog.visible = false;

From c9a3221090b27d39f540db5b6ca6a7555bff9877 Mon Sep 17 00:00:00 2001
From: Liang <545073804@qq.com>
Date: Mon, 1 Apr 2024 15:58:16 +0800
Subject: [PATCH 2/2] =?UTF-8?q?update=20=E5=88=86=E7=89=87=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E7=95=8C=E9=9D=A2=E9=80=BB=E8=BE=91=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilePartUpload/index.vue | 77 +++++++++++++------------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/src/components/FilePartUpload/index.vue b/src/components/FilePartUpload/index.vue
index e6dad24..2056db6 100644
--- a/src/components/FilePartUpload/index.vue
+++ b/src/components/FilePartUpload/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="upload-file" style="width: 90%">
     <el-upload
       class="upload-demo"
       action="#"
@@ -23,19 +23,10 @@
       <!--        </div>-->
       <!--      </template>-->
     </el-upload>
-    <!-- 文件列表 -->
-    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
-        <el-link :href="`${file.url}`" :underline="false" target="_blank">
-          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
-        </el-link>
-        <div class="ele-upload-list__item-content-action">
-          <el-button type="danger" link @click="handleDelete(index)">删除</el-button>
-        </div>
-      </li>
-    </transition-group>
   </div>
-  <el-button type="success" @click="startUpload">开始上传</el-button>
+  <div class="float-left">
+    <el-button type="success" @click="startUpload">开始上传</el-button>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -62,7 +53,6 @@ const fileList = ref([]);
 const startUpload = () => {
   proxy?.$modal.loading('正在上传文件，请稍候...');
   uploadNextPart();
-  proxy?.$modal.closeLoading();
 };
 
 // 实际分片上传函数
@@ -72,7 +62,6 @@ const uploadNextPart = () => {
     const partNumber = state.partNumber + 1;
     const formData = new FormData();
     formData.append('file', filePart);
-    console.log('file:', filePart);
     // 上传第一片时，uploadId是不存在的
     if (state.uploadId) {
       formData.append('uploadId', state.uploadId);
@@ -86,25 +75,47 @@ const uploadNextPart = () => {
     formData.append('needMerge', partNumber === state.totalParts);
 
     partUpload(formData)
-      .then((resp) => {
-        state.partNumber++;
-        if (resp.data.uploadId) {
-          state.uploadId = resp.data.uploadId;
-        }
-        if (resp.data.mergeCompleted) {
-          proxy?.$modal.msgSuccess('文件上传完成');
-        } else {
-          // 继续上传下一片
-          // 如果需要做断点或者暂停上传，可以在这里做介入
-          uploadNextPart();
-        }
+      .then((res) => {
+        handleUploadSuccess(res);
       })
       .catch((error) => {
-        proxy?.$modal.msgError('上传文件失败');
+        handleUploadError(error);
       });
   }
 };
 
+// 上传成功回调
+const handleUploadSuccess = (res: any) => {
+  if (res.code === 200) {
+    if (res.data.mergeCompleted) {
+      proxy?.$modal.msgSuccess('文件上传完成');
+      uploadedSuccessfully();
+    } else {
+      // 继续上传下一片，如果需要做断点或者暂停上传，可以在这里做介入
+      state.partNumber++;
+      if (res.data.uploadId && !state.uploadId) {
+        state.uploadId = res.data.uploadId;
+      }
+      uploadNextPart();
+    }
+  } else {
+    proxy?.$modal.closeLoading();
+    proxy?.$modal.msgError(res.msg);
+    uploadedSuccessfully();
+  }
+};
+
+// 上传结束处理
+const uploadedSuccessfully = () => {
+  proxy?.$modal.closeLoading();
+};
+
+// 上传失败
+const handleUploadError = (error: any) => {
+  proxy?.$modal.msgError('上传文件失败');
+  proxy?.$modal.closeLoading();
+};
+
 // 文件发生更改时
 const handleChange = (uploadFile, uploadFiles) => {
   stateReset();
@@ -136,14 +147,4 @@ const stateReset = () => {
   state.partNumber = 0;
   state.totalParts = 0;
 };
-
-// 获取文件名称
-const getFileName = (name: string) => {
-  // 如果是url那么取最后的名字 如果不是直接返回
-  if (name.lastIndexOf('/') > -1) {
-    return name.slice(name.lastIndexOf('/') + 1);
-  } else {
-    return name;
-  }
-};
 </script>