feat: 切片上传

openapi.json

@@ -0,0 +1,781 @@
+{
+  "openapi": "3.1.0",
+  "info": { "title": "FastAPI", "version": "0.1.0" },
+  "paths": {
+    "/share/text/": {
+      "post": {
+        "tags": ["分享"],
+        "summary": "Share Text",
+        "operationId": "share_text_share_text__post",
+        "parameters": [
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/x-www-form-urlencoded": {
+              "schema": { "$ref": "#/components/schemas/Body_share_text_share_text__post" }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/share/file/": {
+      "post": {
+        "tags": ["分享"],
+        "summary": "Share File",
+        "operationId": "share_file_share_file__post",
+        "parameters": [
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "multipart/form-data": {
+              "schema": { "$ref": "#/components/schemas/Body_share_file_share_file__post" }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/share/select/": {
+      "get": {
+        "tags": ["分享"],
+        "summary": "Get Code File",
+        "operationId": "get_code_file_share_select__get",
+        "parameters": [
+          {
+            "name": "code",
+            "in": "query",
+            "required": true,
+            "schema": { "type": "string", "title": "Code" }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      },
+      "post": {
+        "tags": ["分享"],
+        "summary": "Select File",
+        "operationId": "select_file_share_select__post",
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": { "schema": { "$ref": "#/components/schemas/SelectFileModel" } }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/share/download": {
+      "get": {
+        "tags": ["分享"],
+        "summary": "Download File",
+        "operationId": "download_file_share_download_get",
+        "parameters": [
+          {
+            "name": "key",
+            "in": "query",
+            "required": true,
+            "schema": { "type": "string", "title": "Key" }
+          },
+          {
+            "name": "code",
+            "in": "query",
+            "required": true,
+            "schema": { "type": "string", "title": "Code" }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/chunk/upload/init/": {
+      "post": {
+        "tags": ["切片"],
+        "summary": "Init Chunk Upload",
+        "operationId": "init_chunk_upload_chunk_upload_init__post",
+        "requestBody": {
+          "content": {
+            "application/x-www-form-urlencoded": {
+              "schema": {
+                "$ref": "#/components/schemas/Body_init_chunk_upload_chunk_upload_init__post"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/chunk/upload/chunk/{upload_id}/{chunk_index}": {
+      "post": {
+        "tags": ["切片"],
+        "summary": "Upload Chunk",
+        "operationId": "upload_chunk_chunk_upload_chunk__upload_id___chunk_index__post",
+        "parameters": [
+          {
+            "name": "upload_id",
+            "in": "path",
+            "required": true,
+            "schema": { "type": "string", "title": "Upload Id" }
+          },
+          {
+            "name": "chunk_index",
+            "in": "path",
+            "required": true,
+            "schema": { "type": "integer", "title": "Chunk Index" }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "multipart/form-data": {
+              "schema": {
+                "$ref": "#/components/schemas/Body_upload_chunk_chunk_upload_chunk__upload_id___chunk_index__post"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/chunk/upload/complete/{upload_id}": {
+      "post": {
+        "tags": ["切片"],
+        "summary": "Complete Upload",
+        "operationId": "complete_upload_chunk_upload_complete__upload_id__post",
+        "parameters": [
+          {
+            "name": "upload_id",
+            "in": "path",
+            "required": true,
+            "schema": { "type": "string", "title": "Upload Id" }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/x-www-form-urlencoded": {
+              "schema": {
+                "$ref": "#/components/schemas/Body_complete_upload_chunk_upload_complete__upload_id__post"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/admin/login": {
+      "post": {
+        "tags": ["管理"],
+        "summary": "Login",
+        "operationId": "login_admin_login_post",
+        "requestBody": {
+          "content": {
+            "application/json": { "schema": { "$ref": "#/components/schemas/LoginData" } }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/admin/dashboard": {
+      "get": {
+        "tags": ["管理"],
+        "summary": "Dashboard",
+        "operationId": "dashboard_admin_dashboard_get",
+        "parameters": [
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/admin/file/delete": {
+      "delete": {
+        "tags": ["管理"],
+        "summary": "File Delete",
+        "operationId": "file_delete_admin_file_delete_delete",
+        "parameters": [
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/IDData" } } }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/admin/file/list": {
+      "get": {
+        "tags": ["管理"],
+        "summary": "File List",
+        "operationId": "file_list_admin_file_list_get",
+        "parameters": [
+          {
+            "name": "page",
+            "in": "query",
+            "required": false,
+            "schema": { "type": "integer", "default": 1, "title": "Page" }
+          },
+          {
+            "name": "size",
+            "in": "query",
+            "required": false,
+            "schema": { "type": "integer", "default": 10, "title": "Size" }
+          },
+          {
+            "name": "keyword",
+            "in": "query",
+            "required": false,
+            "schema": { "type": "string", "default": "", "title": "Keyword" }
+          },
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/admin/config/get": {
+      "get": {
+        "tags": ["管理"],
+        "summary": "Get Config",
+        "operationId": "get_config_admin_config_get_get",
+        "parameters": [
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/admin/config/update": {
+      "patch": {
+        "tags": ["管理"],
+        "summary": "Update Config",
+        "operationId": "update_config_admin_config_update_patch",
+        "parameters": [
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "type": "object", "title": "Data" } } }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/admin/file/download": {
+      "get": {
+        "tags": ["管理"],
+        "summary": "File Download",
+        "operationId": "file_download_admin_file_download_get",
+        "parameters": [
+          {
+            "name": "id",
+            "in": "query",
+            "required": true,
+            "schema": { "type": "integer", "title": "Id" }
+          },
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/admin/local/lists": {
+      "get": {
+        "tags": ["管理"],
+        "summary": "Get Local Lists",
+        "operationId": "get_local_lists_admin_local_lists_get",
+        "parameters": [
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/admin/local/delete": {
+      "delete": {
+        "tags": ["管理"],
+        "summary": "Delete Local File",
+        "operationId": "delete_local_file_admin_local_delete_delete",
+        "parameters": [
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": { "schema": { "$ref": "#/components/schemas/DeleteItem" } }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/admin/local/share": {
+      "post": {
+        "tags": ["管理"],
+        "summary": "Share Local File",
+        "operationId": "share_local_file_admin_local_share_post",
+        "parameters": [
+          {
+            "name": "authorization",
+            "in": "header",
+            "required": false,
+            "schema": { "type": "string", "title": "Authorization" }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": { "schema": { "$ref": "#/components/schemas/ShareItem" } }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/": {
+      "get": {
+        "summary": "Index",
+        "operationId": "index__get",
+        "parameters": [
+          { "name": "request", "in": "query", "required": false, "schema": { "title": "Request" } },
+          { "name": "exc", "in": "query", "required": false, "schema": { "title": "Exc" } }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      },
+      "post": {
+        "summary": "Get Config",
+        "operationId": "get_config__post",
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          }
+        }
+      }
+    },
+    "/robots.txt": {
+      "get": {
+        "summary": "Robots",
+        "operationId": "robots_robots_txt_get",
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": { "application/json": { "schema": {} } }
+          }
+        }
+      }
+    }
+  },
+  "components": {
+    "schemas": {
+      "Body_complete_upload_chunk_upload_complete__upload_id__post": {
+        "properties": {
+          "expire_value": { "type": "integer", "title": "Expire Value" },
+          "expire_style": { "type": "string", "title": "Expire Style" }
+        },
+        "type": "object",
+        "required": ["expire_value", "expire_style"],
+        "title": "Body_complete_upload_chunk_upload_complete__upload_id__post"
+      },
+      "Body_init_chunk_upload_chunk_upload_init__post": {
+        "properties": {
+          "file_name": { "type": "string", "title": "File Name" },
+          "file_size": { "type": "integer", "title": "File Size" },
+          "chunk_size": { "type": "integer", "title": "Chunk Size", "default": 5242880 },
+          "file_hash": { "type": "string", "title": "File Hash" }
+        },
+        "type": "object",
+        "required": ["file_name", "file_size", "file_hash"],
+        "title": "Body_init_chunk_upload_chunk_upload_init__post"
+      },
+      "Body_share_file_share_file__post": {
+        "properties": {
+          "expire_value": {
+            "type": "integer",
+            "exclusiveMinimum": 0.0,
+            "title": "Expire Value",
+            "default": 1
+          },
+          "expire_style": { "type": "string", "title": "Expire Style", "default": "day" },
+          "file": { "type": "string", "format": "binary", "title": "File" }
+        },
+        "type": "object",
+        "required": ["file"],
+        "title": "Body_share_file_share_file__post"
+      },
+      "Body_share_text_share_text__post": {
+        "properties": {
+          "text": { "type": "string", "title": "Text" },
+          "expire_value": {
+            "type": "integer",
+            "exclusiveMinimum": 0.0,
+            "title": "Expire Value",
+            "default": 1
+          },
+          "expire_style": { "type": "string", "title": "Expire Style", "default": "day" }
+        },
+        "type": "object",
+        "required": ["text"],
+        "title": "Body_share_text_share_text__post"
+      },
+      "Body_upload_chunk_chunk_upload_chunk__upload_id___chunk_index__post": {
+        "properties": { "chunk": { "type": "string", "format": "binary", "title": "Chunk" } },
+        "type": "object",
+        "required": ["chunk"],
+        "title": "Body_upload_chunk_chunk_upload_chunk__upload_id___chunk_index__post"
+      },
+      "DeleteItem": {
+        "properties": { "filename": { "type": "string", "title": "Filename" } },
+        "type": "object",
+        "required": ["filename"],
+        "title": "DeleteItem"
+      },
+      "HTTPValidationError": {
+        "properties": {
+          "detail": {
+            "items": { "$ref": "#/components/schemas/ValidationError" },
+            "type": "array",
+            "title": "Detail"
+          }
+        },
+        "type": "object",
+        "title": "HTTPValidationError"
+      },
+      "IDData": {
+        "properties": { "id": { "type": "integer", "title": "Id" } },
+        "type": "object",
+        "required": ["id"],
+        "title": "IDData"
+      },
+      "LoginData": {
+        "properties": { "password": { "type": "string", "title": "Password" } },
+        "type": "object",
+        "required": ["password"],
+        "title": "LoginData"
+      },
+      "SelectFileModel": {
+        "properties": { "code": { "type": "string", "title": "Code" } },
+        "type": "object",
+        "required": ["code"],
+        "title": "SelectFileModel"
+      },
+      "ShareItem": {
+        "properties": {
+          "expire_value": { "type": "integer", "title": "Expire Value" },
+          "expire_style": { "type": "string", "title": "Expire Style", "default": "day" },
+          "filename": { "type": "string", "title": "Filename" }
+        },
+        "type": "object",
+        "required": ["expire_value", "filename"],
+        "title": "ShareItem"
+      },
+      "ValidationError": {
+        "properties": {
+          "loc": {
+            "items": { "anyOf": [{ "type": "string" }, { "type": "integer" }] },
+            "type": "array",
+            "title": "Location"
+          },
+          "msg": { "type": "string", "title": "Message" },
+          "type": { "type": "string", "title": "Error Type" }
+        },
+        "type": "object",
+        "required": ["loc", "msg", "type"],
+        "title": "ValidationError"
+      }
+    }
+  }
+}

src/views/SendFileView.vue

@@ -1,31 +1,48 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300">
+  <div
-    <div class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300" :class="[
+    class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
-      isDarkMode
+  >
-        ? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700'
+    <div
-        : 'bg-white border-gray-200'
+      class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300"
-    ]">
+      :class="[
+        isDarkMode
+          ? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700'
+          : 'bg-white border-gray-200'
+      ]"
+    >
       <div class="p-8">
-        <h2 class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300" :class="[
+        <h2
-          isDarkMode
+          class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300"
-            ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
+          :class="[
-            : 'text-indigo-600'
+            isDarkMode
-        ]" @click="toRetrieve">
+              ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
+              : 'text-indigo-600'
+          ]"
+          @click="toRetrieve"
+        >
           {{ config.name }}
         </h2>
         <form @submit.prevent="handleSubmit" class="space-y-8">
           <!-- 发送类型选择 -->
           <div class="flex justify-center space-x-4 mb-6">
-            <button type="button" @click="sendType = 'file'" :class="[
+            <button
-              'px-4 py-2 rounded-lg',
+              type="button"
-              sendType === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
+              @click="sendType = 'file'"
-            ]">
+              :class="[
+                'px-4 py-2 rounded-lg',
+                sendType === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
+              ]"
+            >
               发送文件
             </button>
-            <button type="button" @click="sendType = 'text'" :class="[
+            <button
-              'px-4 py-2 rounded-lg',
+              type="button"
-              sendType === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
+              @click="sendType = 'text'"
-            ]">
+              :class="[
+                'px-4 py-2 rounded-lg',
+                sendType === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
+              ]"
+            >
               发送文本
             </button>
           </div>
@@ -39,23 +56,37 @@
                   isDarkMode
                     ? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
                     : 'bg-gray-100 border-gray-300 hover:border-indigo-500'
-                ]" @click="triggerFileUpload" @dragover.prevent @drop.prevent="handleFileDrop">
+                ]"
-                <input id="file-upload" type="file" class="hidden" @change="handleFileUpload" ref="fileInput" />
+                @click="triggerFileUpload"
+                @dragover.prevent
+                @drop.prevent="handleFileDrop"
+              >
+                <input
+                  id="file-upload"
+                  type="file"
+                  class="hidden"
+                  @change="handleFileUpload"
+                  ref="fileInput"
+                />
                 <div class="absolute inset-0 w-full h-full" v-if="uploadProgress > 0">
                   <BorderProgressBar :progress="uploadProgress" />
                 </div>
-                <UploadCloudIcon :class="[
+                <UploadCloudIcon
-                  'w-16 h-16 transition-colors duration-300',
+                  :class="[
-                  isDarkMode
+                    'w-16 h-16 transition-colors duration-300',
-                    ? 'text-gray-400 group-hover:text-indigo-400'
+                    isDarkMode
-                    : 'text-gray-600 group-hover:text-indigo-600'
+                      ? 'text-gray-400 group-hover:text-indigo-400'
-                ]" />
+                      : 'text-gray-600 group-hover:text-indigo-600'
-                <p :class="[
+                  ]"
-                  'mt-4 text-sm transition-colors duration-300 w-full text-center',
+                />
-                  isDarkMode
+                <p
-                    ? 'text-gray-400 group-hover:text-indigo-400'
+                  :class="[
-                    : 'text-gray-600 group-hover:text-indigo-600'
+                    'mt-4 text-sm transition-colors duration-300 w-full text-center',
-                ]">
+                    isDarkMode
+                      ? 'text-gray-400 group-hover:text-indigo-400'
+                      : 'text-gray-600 group-hover:text-indigo-600'
+                  ]"
+                >
                   <span class="block truncate">
                     {{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }}
                   </span>
@@ -68,12 +99,18 @@
             <div v-else key="text" class="grid grid-cols-1 gap-8">
               <!-- 文本输入区域 -->
               <div v-if="sendType === 'text'" class="flex flex-col">
-                <textarea id="text-content" v-model="textContent" rows="7" :class="[
+                <textarea
-                  'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none',
+                  id="text-content"
-                  isDarkMode
+                  v-model="textContent"
-                    ? 'bg-gray-800 bg-opacity-50 text-white'
+                  rows="7"
-                    : 'bg-white text-gray-900 border border-gray-300'
+                  :class="[
-                ]" placeholder="在此输入要发送的文本..."></textarea>
+                    'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none',
+                    isDarkMode
+                      ? 'bg-gray-800 bg-opacity-50 text-white'
+                      : 'bg-white text-gray-900 border border-gray-300'
+                  ]"
+                  placeholder="在此输入要发送的文本..."
+                ></textarea>
               </div>
             </div>
           </transition>
@@ -82,38 +119,51 @@
             <label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">
               过期方式
             </label>
-            <select v-model="expirationMethod" :class="[
+            <select
-              'px-4 py-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500',
+              v-model="expirationMethod"
-              isDarkMode
+              :class="[
-                ? 'bg-gray-800 bg-opacity-50 text-white'
+                'px-4 py-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500',
-                : 'bg-white text-gray-900 border border-gray-300'
+                isDarkMode
-            ]">
+                  ? 'bg-gray-800 bg-opacity-50 text-white'
+                  : 'bg-white text-gray-900 border border-gray-300'
+              ]"
+            >
               <option v-for="item in config.expireStyle" :value="item" :key="item">
                 {{ getUnit(item) }}
               </option>
             </select>
             <div v-if="expirationMethod !== 'forever'" class="flex items-center space-x-2">
               <div class="relative flex-grow">
-                <input v-model="expirationValue" type="number" :placeholder="getPlaceholder()" :class="[
+                <input
-                  'w-full px-4 py-2 pr-16 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500',
+                  v-model="expirationValue"
-                  isDarkMode
+                  type="number"
-                    ? 'bg-gray-800 bg-opacity-50 text-white'
+                  :placeholder="getPlaceholder()"
-                    : 'bg-white text-gray-900 border border-gray-300'
+                  :class="[
-                ]" />
+                    'w-full px-4 py-2 pr-16 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500',
-                <span :class="[
+                    isDarkMode
-                  'absolute right-3 top-1/2 transform -translate-y-1/2',
+                      ? 'bg-gray-800 bg-opacity-50 text-white'
-                  isDarkMode ? 'text-gray-300' : 'text-gray-700'
+                      : 'bg-white text-gray-900 border border-gray-300'
-                ]">
+                  ]"
+                />
+                <span
+                  :class="[
+                    'absolute right-3 top-1/2 transform -translate-y-1/2',
+                    isDarkMode ? 'text-gray-300' : 'text-gray-700'
+                  ]"
+                >
                   {{ getUnit() }}
                 </span>
               </div>
             </div>
           </div>
           <!-- 提交按钮 -->
-          <button type="submit"
+          <button
-            class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group">
+            type="submit"
+            class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
+          >
             <span
-              class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
+              class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"
+            ></span>
             <span class="relative z-10 flex items-center justify-center text-lg">
               <SendIcon class="w-6 h-6 mr-2" />
               <span>安全寄送</span>
@@ -127,14 +177,22 @@
         </div>
       </div>
 
-      <div class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
+      <div
-        :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']">
+        class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
-        <span class="text-sm flex items-center" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
+        :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
+      >
+        <span
+          class="text-sm flex items-center"
+          :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
+        >
           <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
           安全加密
         </span>
-        <button @click="toggleDrawer" class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
+        <button
-          :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']">
+          @click="toggleDrawer"
+          class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
+          :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+        >
           发件记录
           <ClipboardListIcon class="w-4 h-4 ml-1" />
         </button>
@@ -143,56 +201,84 @@
 
     <!-- 抽屉式发件记录 -->
     <transition name="drawer">
-      <div v-if="showDrawer"
+      <div
+        v-if="showDrawer"
         class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
-        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']">
+        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
-        <div class="flex justify-between items-center p-6 border-b"
+      >
-          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
+        <div
+          class="flex justify-between items-center p-6 border-b"
+          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
+        >
           <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
             发件记录
           </h3>
-          <button @click="toggleDrawer" class="hover:text-white transition duration-300"
+          <button
-            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']">
+            @click="toggleDrawer"
+            class="hover:text-white transition duration-300"
+            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
+          >
             <XIcon class="w-6 h-6" />
           </button>
         </div>
         <div class="flex-grow overflow-y-auto p-6">
           <transition-group name="list" tag="div" class="space-y-4">
-            <div v-for="record in sendRecords" :key="record.id"
+            <div
+              v-for="record in sendRecords"
+              :key="record.id"
               class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
-              :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']">
+              :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
+            >
               <div class="flex-shrink-0 mr-4">
-                <FileIcon class="w-10 h-10" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+                <FileIcon
+                  class="w-10 h-10"
+                  :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+                />
               </div>
               <div class="flex-grow min-w-0 mr-4">
-                <p class="font-medium text-lg truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+                <p
+                  class="font-medium text-lg truncate"
+                  :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+                >
                   {{ record.filename ? record.filename : 'Text' }}
                 </p>
-                <p class="text-sm truncate" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
+                <p
+                  class="text-sm truncate"
+                  :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
+                >
                   {{ record.date }} · {{ record.size }}
                 </p>
               </div>
               <div class="flex-shrink-0 flex space-x-2">
-                <button @click="copyRetrieveLink(record.retrieveCode)"
+                <button
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
+                  @click="copyRetrieveLink(record.retrieveCode)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
+                  :class="[
                     isDarkMode
                       ? 'hover:bg-blue-400 text-blue-400'
                       : 'hover:bg-blue-100 text-blue-600'
-                  ]">
+                  ]"
+                >
                   <ClipboardCopyIcon class="w-5 h-5" />
                 </button>
-                <button @click="viewDetails(record)"
+                <button
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
+                  @click="viewDetails(record)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
+                  :class="[
                     isDarkMode
                       ? 'hover:bg-green-400 text-green-400'
                       : 'hover:bg-green-100 text-green-600'
-                  ]">
+                  ]"
+                >
                   <EyeIcon class="w-5 h-5" />
                 </button>
-                <button @click="deleteRecord(record.id)"
+                <button
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
+                  @click="deleteRecord(record.id)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
+                  :class="[
                     isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
-                  ]">
+                  ]"
+                >
                   <TrashIcon class="w-5 h-5" />
                 </button>
               </div>
@@ -204,34 +290,53 @@
 
     <!-- 记录详情弹窗 -->
     <transition name="fade">
-      <div v-if="selectedRecord" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div
+        v-if="selectedRecord"
+        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+      >
         <div
           class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70"
-          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
+          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
-          <h3 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+        >
+          <h3
+            class="text-2xl font-bold mb-6"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+          >
             文件详情
           </h3>
           <div class="space-y-4">
             <div class="flex items-center">
-              <FileIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+              <FileIcon
+                class="w-6 h-6 mr-3"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              />
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                 <span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
               </p>
             </div>
             <div class="flex items-center">
-              <CalendarIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+              <CalendarIcon
+                class="w-6 h-6 mr-3"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              />
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                 <span class="font-medium">发送日期：</span>{{ selectedRecord.date }}
               </p>
             </div>
             <div class="flex items-center">
-              <HardDriveIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+              <HardDriveIcon
+                class="w-6 h-6 mr-3"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              />
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                 <span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
               </p>
             </div>
             <div class="flex items-center">
-              <ClockIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+              <ClockIcon
+                class="w-6 h-6 mr-3"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              />
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                 <span class="font-medium">过期时间：</span>{{ selectedRecord.expiration }}
               </p>
@@ -241,12 +346,16 @@
           <!-- 取件码和二维码部分 -->
           <div class="mt-6 flex justify-between items-center">
             <div class="flex flex-col items-center w-1/2 pr-2">
-              <h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+              <h4
+                class="text-lg font-semibold mb-3"
+                :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+              >
                 取件码
               </h4>
               <div
                 class="bg-gray-100 p-3 rounded-lg shadow-md cursor-pointer hover:bg-gray-200 transition-colors duration-300 w-full text-center"
-                @click="copyRetrieveCode(selectedRecord.retrieveCode)">
+                @click="copyRetrieveCode(selectedRecord.retrieveCode)"
+              >
                 <p class="text-2xl font-bold text-indigo-600">{{ selectedRecord.retrieveCode }}</p>
               </div>
               <p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
@@ -254,7 +363,10 @@
               </p>
             </div>
             <div class="flex flex-col items-center w-1/2 pl-2">
-              <h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+              <h4
+                class="text-lg font-semibold mb-3"
+                :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+              >
                 二维码
               </h4>
               <div class="bg-white p-2 rounded-lg shadow-md">
@@ -266,8 +378,10 @@
             </div>
           </div>
 
-          <button @click="selectedRecord = null"
+          <button
-            class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105">
+            @click="selectedRecord = null"
+            class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105"
+          >
             关闭
           </button>
         </div>
@@ -295,7 +409,6 @@ import {
 import { useRouter } from 'vue-router'
 import BorderProgressBar from '@/components/common/BorderProgressBar.vue'
 import QRCode from 'qrcode.vue'
-import SparkMD5 from 'spark-md5'
 import { useFileDataStore } from '../stores/fileData'
 import api from '@/utils/api'
 import { copyRetrieveLink, copyRetrieveCode } from '@/utils/clipboard'
@@ -321,7 +434,6 @@ import { useAlertStore } from '@/stores/alertStore'
 const alertStore = useAlertStore()
 const sendRecords = computed(() => fileDataStore.shareData)
 
-// 新增状态
 const fileHash = ref('')
 
 const triggerFileUpload = () => {
@@ -333,7 +445,7 @@ const handleFileUpload = async (event: Event) => {
   if (target.files && target.files.length > 0) {
     selectedFile.value = target.files[0]
     fileHash.value = await calculateFileHash(selectedFile.value)
-    // startChunkUpload()
+    console.log(fileHash.value)
   }
 }
 
@@ -346,21 +458,24 @@ const handleFileDrop = async (event: DragEvent) => {
 
 const calculateFileHash = async (file: File): Promise<string> => {
   return new Promise((resolve) => {
-    const chunkSize = 2097152
+    const chunkSize = 2097152 // 保持 2MB 的切片大小用于计算哈希
-    const spark = new SparkMD5.ArrayBuffer()
     const fileReader = new FileReader()
-
     let currentChunk = 0
     const chunks = Math.ceil(file.size / chunkSize)
 
-    fileReader.onload = (e) => {
+    fileReader.onload = async (e) => {
-      spark.append(e.target!.result as ArrayBuffer)
+      const chunk = new Uint8Array(e.target!.result as ArrayBuffer)
+      // 计算当前切片的 SHA256
+      const hashBuffer = await crypto.subtle.digest('SHA-256', chunk)
+      const hashArray = Array.from(new Uint8Array(hashBuffer))
+      const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
+
       currentChunk++
 
       if (currentChunk < chunks) {
         loadNext()
       } else {
-        resolve(spark.end())
+        resolve(hashHex)
       }
     }
 
@@ -408,6 +523,98 @@ const getUnit = (value: string = expirationMethod.value) => {
   }
 }
 
+const handleChunkUpload = async (file: File) => {
+  try {
+    // 默认切片大小为5MB
+    const chunkSize = 5 * 1024 * 1024
+    const chunks = Math.ceil(file.size / chunkSize)
+    // 1. 初始化切片上传
+    const initResponse: any = await api.post('/chunk/upload/init/', {
+      file_name: file.name,
+      file_size: file.size,
+      chunk_size: chunkSize,
+      file_hash: fileHash.value
+    })
+
+    if (initResponse.code !== 200) {
+      throw new Error('初始化切片上传失败')
+    }
+    if (initResponse.detail.existed) {
+      return initResponse
+    }
+    const uploadId = initResponse.detail.upload_id
+
+    // 2. 上传切片
+    for (let i = 0; i < chunks; i++) {
+      const start = i * chunkSize
+      const end = Math.min(start + chunkSize, file.size)
+      const chunk = file.slice(start, end)
+
+      const chunkFormData = new FormData()
+      chunkFormData.append('chunk', new Blob([chunk], { type: file.type })) // 确保以Blob形式添加
+
+      // 使用 application/x-www-form-urlencoded 格式
+      const chunkResponse: any = await api.post(
+        `/chunk/upload/chunk/${uploadId}/${i}`,
+        chunkFormData,
+        {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          onUploadProgress: (progressEvent: any) => {
+            const percentCompleted = Math.round(
+              ((i * chunkSize + progressEvent.loaded) * 100) / file.size
+            )
+            uploadProgress.value = percentCompleted
+          }
+        }
+      )
+
+      if (chunkResponse.code !== 200) {
+        throw new Error(`切片 ${i} 上传失败`)
+      }
+    }
+
+    // 3. 完成上传
+    const completeResponse: any = await api.post(`/chunk/upload/complete/${uploadId}`, {
+      expire_value: expirationValue.value ? parseInt(expirationValue.value) : 1,
+      expire_style: expirationMethod.value
+    })
+
+    if (completeResponse.code !== 200) {
+      throw new Error('完成上传失败')
+    }
+
+    return completeResponse
+  } catch (error: any) {
+    console.error('切片上传失败:', error)
+    if (error.response?.data?.detail) {
+      alertStore.showAlert(error.response.data.detail, 'error')
+    } else {
+      alertStore.showAlert('上传失败,请稍后重试', 'error')
+    }
+    throw error
+  }
+}
+const handleDefaultFileUpload = async (file: File) => {
+  const formData = new FormData()
+  // 添加上传进度监听
+  const config = {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    onUploadProgress: (progressEvent: any) => {
+      const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+      uploadProgress.value = percentCompleted
+    }
+  }
+  formData.append('file', file)
+  formData.append('expire_value', expirationValue.value)
+  formData.append('expire_style', expirationMethod.value)
+  const response: any = await api.post('/share/file/', formData, config)
+  return response
+}
+
 const handleSubmit = async () => {
   if (sendType.value === 'file' && !selectedFile.value) {
     alertStore.showAlert('请选择要上传的文件', 'error')
@@ -424,35 +631,21 @@ const handleSubmit = async () => {
 
   try {
     let response: any
-    const formData = new FormData()
-    const isFile = sendType.value === 'file'
-    if (isFile) {
-      formData.append('file', selectedFile.value!)
-    } else {
-      formData.append('text', textContent.value)
-      // const textBlob = new Blob([textContent.value], { type: 'text/plain' })
-      // formData.append('file', textBlob, 'text_content.txt')
-    }
 
-    if (expirationMethod.value !== 'forever') {
+    if (sendType.value === 'file') {
-      formData.append('expire_value', expirationValue.value)
+      // 使用切片上传替代原来的直接上传
-    }
+      if (config.enableChunk) {
-    formData.append('expire_style', expirationMethod.value)
+        response = await handleChunkUpload(selectedFile.value!)
-
+      } else {
-    // 添加上传进度监听
+        response = await handleDefaultFileUpload(selectedFile.value!)
-    const config = {
-      headers: {
-        'Content-Type': 'multipart/form-data'
-      },
-      onUploadProgress: (progressEvent: any) => {
-        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
-        uploadProgress.value = percentCompleted
       }
-    }
-    if (isFile) {
-      response = await api.post('/share/file/', formData, config)
     } else {
-      response = await api.post('/share/text/', formData, config)
+      // 文本上传保持不变
+      const formData = new FormData()
+      formData.append('text', textContent.value)
+      formData.append('expire_value', expirationValue.value)
+      formData.append('expire_style', expirationMethod.value)
+      response = await api.post('/share/text/', formData)
     }
 
     if (response && response.code === 200) {
@@ -493,13 +686,12 @@ const handleSubmit = async () => {
     }
   } catch (error: any) {
     console.error('发送失败:', error)
-    if (error.response.data.detail) {
+    if (error.response?.data?.detail) {
       alertStore.showAlert(error.response.data.detail, 'error')
     } else {
       alertStore.showAlert('发送失败,请稍后重试', 'error')
     }
   } finally {
-    // 确保无论成功还是失败,最后都重置进度条
     uploadProgress.value = 0
   }
 }

src/views/manage/SystemSettingsView.vue

@@ -21,6 +21,7 @@ interface ConfigState {
   uploadMinute: number
   max_save_seconds: number
   opacity: number
+  enableChunk: number
   s3_access_key_id: string
   background: string
   showAdminAddr: number
@@ -59,6 +60,7 @@ const config = ref<ConfigState>({
   notify_content: '',
   openUpload: 1,
   uploadSize: 1,
+  enableChunk: 0,
   uploadMinute: 1,
   max_save_seconds: 0,
   opacity: 0.9,
@@ -330,6 +332,7 @@ refreshData()
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
               ]" />
           </div>
+
           <div class="space-y-4">
             <div class="space-y-2">
               <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
@@ -349,7 +352,27 @@ refreshData()
                 <option value="webdav">Webdav 存储</option>
               </select>
             </div>
-
+            <div class="space-y-2" v-if="config.file_storage === 'local'">
+              <label class="block text-sm font-medium mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                开启切片上传（实验性功能，还在开发中，目前仅本地存储可用，可能会出现未知问题）
+              </label>
+              <div class="flex items-center">
+                <button type="button" @click="config.enableChunk = config.enableChunk === 1 ? 0 : 1"
+                  class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  :class="[config.enableChunk === 1 ? 'bg-indigo-600' : 'bg-gray-200']" role="switch"
+                  :aria-checked="config.enableChunk === 1">
+                  <span
+                    class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                    :class="[
+                      config.enableChunk === 1 ? 'translate-x-5' : 'translate-x-0',
+                      isDarkMode && config.enableChunk !== 1 ? 'bg-gray-100' : 'bg-white'
+                    ]" />
+                </button>
+                <span class="ml-3 text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                  {{ config.enableChunk === 1 ? '已开启' : '已关闭' }}
+                </span>
+              </div>
+            </div>
             <div v-if="config.file_storage === 'webdav'" class="space-y-4">
               <!-- 通知设置 -->
               <div class="space-y-2">