update 分片上传界面逻辑更改

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) => {
+      .then((res) => {
-        state.partNumber++;
+        handleUploadSuccess(res);
-        if (resp.data.uploadId) {
-          state.uploadId = resp.data.uploadId;
-        }
-        if (resp.data.mergeCompleted) {
-          proxy?.$modal.msgSuccess('文件上传完成');
-        } else {
-          // 继续上传下一片
-          // 如果需要做断点或者暂停上传，可以在这里做介入
-          uploadNextPart();
-        }
       })
       .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>