extraFile实现中断文件上传

2025-10-21 11:29:06 +08:00 · 2025-10-21 11:29:06 +08:00 · 9d71fd9c30
parent 45a50ed6cc
commit 9d71fd9c30
5 changed files with 363 additions and 75 deletions
--- a/es/utils/upload.web.d.ts
+++ b/es/utils/upload.web.d.ts
@ -1,3 +1,11 @@
 export declare class Upload {
-    uploadFile(file: File | string, name: string, uploadUrl: string, formData: Record<string, any>, autoInform?: boolean, getPercent?: Function, method?: "POST" | "PUT" | "PATCH"): Promise<any>;
+    private controllers;
+    constructor();
+    uploadFile(file: File | string, name: string, uploadUrl: string, formData: Record<string, any>, autoInform?: boolean, getPercent?: Function, uploadId?: string, // 新增：上传任务ID，用于中断特定上传
+    method?: "POST" | "PUT" | "PATCH"): Promise<any>;
+    abortUpload(uploadId: string): boolean;
+    abortAllUploads(): void;
+    getUploadStatus(uploadId: string): 'uploading' | 'completed' | 'aborted' | 'not-found';
+    private generateUploadId;
+    getActiveUploads(): string[];
 }
--- a/es/utils/upload.web.js
+++ b/es/utils/upload.web.js
@ -1,11 +1,33 @@
 export class Upload {
-    async uploadFile(file, name, uploadUrl, formData, autoInform, getPercent, method = "POST") {
+    controllers = new Map();
+    constructor() {
+        this.uploadFile = this.uploadFile.bind(this);
+        this.abortUpload = this.abortUpload.bind(this);
+        this.abortAllUploads = this.abortAllUploads.bind(this);
+        this.getUploadStatus = this.getUploadStatus.bind(this);
+        this.getActiveUploads = this.getActiveUploads.bind(this);
+    }
+    async uploadFile(file, name, uploadUrl, formData, autoInform, getPercent, uploadId, // 新增：上传任务ID，用于中断特定上传
+    method = "POST") {
        const isPut = method === "PUT";
+        const id = uploadId || this.generateUploadId(file, uploadUrl);
+        // 如果已有相同ID的上传在进行，先中断它
+        if (this.controllers.has(id)) {
+            this.abortUpload(id);
+        }
+        // 创建新的 AbortController
+        const controller = new AbortController();
+        this.controllers.set(id, controller);
        // 进度监听模式
        if (getPercent) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                let percent = 0;
+                // 监听中止信号
+                controller.signal.addEventListener('abort', () => {
+                    xhr.abort();
+                    reject(new DOMException('Upload aborted', 'AbortError'));
+                });
                xhr.upload.addEventListener("progress", (event) => {
                    if (event.lengthComputable) {
                        percent = Math.round((event.loaded / event.total) * 100);
@ -13,6 +35,7 @@ export class Upload {
                    }
                });
                xhr.onload = () => {
+                    this.controllers.delete(id); // 清理控制器
                    if (xhr.status >= 200 && xhr.status < 300) {
                        if (xhr.status === 204) {
                            resolve({ status: 204 });
@ -31,7 +54,19 @@ export class Upload {
                        reject(new Error(`HTTP Error: ${xhr.status}`));
                    }
                };
-                xhr.onerror = () => reject(new Error("Network Error"));
+                xhr.onerror = () => {
+                    this.controllers.delete(id);
+                    // 如果不是因为中止导致的错误
+                    if (!controller.signal.aborted) {
+                        reject(new Error("Network Error"));
+                    }
+                };
+                xhr.onabort = () => {
+                    this.controllers.delete(id);
+                    if (controller.signal.aborted) {
+                        reject(new DOMException('Upload aborted', 'AbortError'));
+                    }
+                };
                xhr.open(method, uploadUrl);
                if (isPut) {
                    // PUT 模式：直接上传文件
@ -52,18 +87,20 @@ export class Upload {
            });
        }
        // 无进度监听模式（直接 fetch）
+        try {
+            let result;
            if (isPut) {
                // S3 预签名上传
                const headers = {};
                if (file instanceof File) {
                    headers["Content-Type"] = file.type || "application/octet-stream";
                }
-            const result = await fetch(uploadUrl, {
+                result = await fetch(uploadUrl, {
                    method: "PUT",
                    headers,
                    body: file,
+                    signal: controller.signal, // 添加中止信号
                });
-            return result;
            }
            else {
                // 表单上传
@ -72,11 +109,61 @@ export class Upload {
                    formData2.append(key, formData[key]);
                }
                formData2.append(name || "file", file);
-            const result = await fetch(uploadUrl, {
+                result = await fetch(uploadUrl, {
                    method,
                    body: formData2,
+                    signal: controller.signal, // 添加中止信号
                });
+            }
+            this.controllers.delete(id); // 成功后清理控制器
            return result;
        }
+        catch (error) {
+            this.controllers.delete(id); // 失败后清理控制器
+            // 人为中断返回204 使general-business处理成功
+            if (error instanceof DOMException && error.name === 'AbortError') {
+                return {
+                    status: 204,
+                };
+            }
+            throw error;
+        }
+    }
+    // 中断特定上传
+    abortUpload(uploadId) {
+        const controller = this.controllers.get(uploadId);
+        if (controller) {
+            controller.abort();
+            this.controllers.delete(uploadId);
+            return true;
+        }
+        return false;
+    }
+    // 中断所有上传
+    abortAllUploads() {
+        this.controllers.forEach((controller, id) => {
+            controller.abort();
+        });
+        this.controllers.clear();
+    }
+    // 获取上传状态
+    getUploadStatus(uploadId) {
+        const controller = this.controllers.get(uploadId);
+        if (!controller)
+            return 'not-found';
+        if (controller.signal.aborted)
+            return 'aborted';
+        return 'uploading';
+    }
+    // 生成唯一的上传ID
+    generateUploadId(file, uploadUrl) {
+        const timestamp = Date.now();
+        const random = Math.random().toString(36).substring(2, 9);
+        const fileInfo = file instanceof File ? `${file.name}-${file.size}` : String(file);
+        return `${uploadUrl}-${fileInfo}-${timestamp}-${random}`;
+    }
+    // 获取所有进行中的上传任务
+    getActiveUploads() {
+        return Array.from(this.controllers.keys());
    }
 }
--- a/lib/utils/upload.web.d.ts
+++ b/lib/utils/upload.web.d.ts
@ -1,3 +1,11 @@
 export declare class Upload {
-    uploadFile(file: File | string, name: string, uploadUrl: string, formData: Record<string, any>, autoInform?: boolean, getPercent?: Function, method?: "POST" | "PUT" | "PATCH"): Promise<any>;
+    private controllers;
+    constructor();
+    uploadFile(file: File | string, name: string, uploadUrl: string, formData: Record<string, any>, autoInform?: boolean, getPercent?: Function, uploadId?: string, // 新增：上传任务ID，用于中断特定上传
+    method?: "POST" | "PUT" | "PATCH"): Promise<any>;
+    abortUpload(uploadId: string): boolean;
+    abortAllUploads(): void;
+    getUploadStatus(uploadId: string): 'uploading' | 'completed' | 'aborted' | 'not-found';
+    private generateUploadId;
+    getActiveUploads(): string[];
 }
--- a/lib/utils/upload.web.js
+++ b/lib/utils/upload.web.js
@ -2,13 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Upload = void 0;
 class Upload {
-    async uploadFile(file, name, uploadUrl, formData, autoInform, getPercent, method = "POST") {
+    controllers = new Map();
+    constructor() {
+        this.uploadFile = this.uploadFile.bind(this);
+        this.abortUpload = this.abortUpload.bind(this);
+        this.abortAllUploads = this.abortAllUploads.bind(this);
+        this.getUploadStatus = this.getUploadStatus.bind(this);
+        this.getActiveUploads = this.getActiveUploads.bind(this);
+    }
+    async uploadFile(file, name, uploadUrl, formData, autoInform, getPercent, uploadId, // 新增：上传任务ID，用于中断特定上传
+    method = "POST") {
        const isPut = method === "PUT";
+        const id = uploadId || this.generateUploadId(file, uploadUrl);
+        // 如果已有相同ID的上传在进行，先中断它
+        if (this.controllers.has(id)) {
+            this.abortUpload(id);
+        }
+        // 创建新的 AbortController
+        const controller = new AbortController();
+        this.controllers.set(id, controller);
        // 进度监听模式
        if (getPercent) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                let percent = 0;
+                // 监听中止信号
+                controller.signal.addEventListener('abort', () => {
+                    xhr.abort();
+                    reject(new DOMException('Upload aborted', 'AbortError'));
+                });
                xhr.upload.addEventListener("progress", (event) => {
                    if (event.lengthComputable) {
                        percent = Math.round((event.loaded / event.total) * 100);
@ -16,6 +38,7 @@ class Upload {
                    }
                });
                xhr.onload = () => {
+                    this.controllers.delete(id); // 清理控制器
                    if (xhr.status >= 200 && xhr.status < 300) {
                        if (xhr.status === 204) {
                            resolve({ status: 204 });
@ -34,7 +57,19 @@ class Upload {
                        reject(new Error(`HTTP Error: ${xhr.status}`));
                    }
                };
-                xhr.onerror = () => reject(new Error("Network Error"));
+                xhr.onerror = () => {
+                    this.controllers.delete(id);
+                    // 如果不是因为中止导致的错误
+                    if (!controller.signal.aborted) {
+                        reject(new Error("Network Error"));
+                    }
+                };
+                xhr.onabort = () => {
+                    this.controllers.delete(id);
+                    if (controller.signal.aborted) {
+                        reject(new DOMException('Upload aborted', 'AbortError'));
+                    }
+                };
                xhr.open(method, uploadUrl);
                if (isPut) {
                    // PUT 模式：直接上传文件
@ -55,18 +90,20 @@ class Upload {
            });
        }
        // 无进度监听模式（直接 fetch）
+        try {
+            let result;
            if (isPut) {
                // S3 预签名上传
                const headers = {};
                if (file instanceof File) {
                    headers["Content-Type"] = file.type || "application/octet-stream";
                }
-            const result = await fetch(uploadUrl, {
+                result = await fetch(uploadUrl, {
                    method: "PUT",
                    headers,
                    body: file,
+                    signal: controller.signal, // 添加中止信号
                });
-            return result;
            }
            else {
                // 表单上传
@ -75,12 +112,62 @@ class Upload {
                    formData2.append(key, formData[key]);
                }
                formData2.append(name || "file", file);
-            const result = await fetch(uploadUrl, {
+                result = await fetch(uploadUrl, {
                    method,
                    body: formData2,
+                    signal: controller.signal, // 添加中止信号
                });
+            }
+            this.controllers.delete(id); // 成功后清理控制器
            return result;
        }
+        catch (error) {
+            this.controllers.delete(id); // 失败后清理控制器
+            // 人为中断返回204 使general-business处理成功
+            if (error instanceof DOMException && error.name === 'AbortError') {
+                return {
+                    status: 204,
+                };
+            }
+            throw error;
+        }
+    }
+    // 中断特定上传
+    abortUpload(uploadId) {
+        const controller = this.controllers.get(uploadId);
+        if (controller) {
+            controller.abort();
+            this.controllers.delete(uploadId);
+            return true;
+        }
+        return false;
+    }
+    // 中断所有上传
+    abortAllUploads() {
+        this.controllers.forEach((controller, id) => {
+            controller.abort();
+        });
+        this.controllers.clear();
+    }
+    // 获取上传状态
+    getUploadStatus(uploadId) {
+        const controller = this.controllers.get(uploadId);
+        if (!controller)
+            return 'not-found';
+        if (controller.signal.aborted)
+            return 'aborted';
+        return 'uploading';
+    }
+    // 生成唯一的上传ID
+    generateUploadId(file, uploadUrl) {
+        const timestamp = Date.now();
+        const random = Math.random().toString(36).substring(2, 9);
+        const fileInfo = file instanceof File ? `${file.name}-${file.size}` : String(file);
+        return `${uploadUrl}-${fileInfo}-${timestamp}-${random}`;
+    }
+    // 获取所有进行中的上传任务
+    getActiveUploads() {
+        return Array.from(this.controllers.keys());
    }
 }
 exports.Upload = Upload;
--- a/src/utils/upload.web.ts
+++ b/src/utils/upload.web.ts
@ -1,6 +1,14 @@
-
-
 export class Upload {
+    private controllers: Map<string, AbortController> = new Map();
+
+    constructor() {
+        this.uploadFile = this.uploadFile.bind(this);
+        this.abortUpload = this.abortUpload.bind(this);
+        this.abortAllUploads = this.abortAllUploads.bind(this);
+        this.getUploadStatus = this.getUploadStatus.bind(this);
+        this.getActiveUploads = this.getActiveUploads.bind(this);
+    }
+
    async uploadFile(
        file: File | string,
        name: string,
@ -8,9 +16,20 @@ export class Upload {
        formData: Record<string, any>,
        autoInform?: boolean,
        getPercent?: Function,
-        method: "POST" | "PUT" | "PATCH" = "POST"
+        uploadId?: string, // 新增：上传任务ID，用于中断特定上传
+        method: "POST" | "PUT" | "PATCH" = "POST",
    ): Promise<any> {
        const isPut = method === "PUT";
+        const id = uploadId || this.generateUploadId(file, uploadUrl);
+
+        // 如果已有相同ID的上传在进行，先中断它
+        if (this.controllers.has(id)) {
+            this.abortUpload(id);
+        }
+
+        // 创建新的 AbortController
+        const controller = new AbortController();
+        this.controllers.set(id, controller);

        // 进度监听模式
        if (getPercent) {
@ -18,6 +37,12 @@ export class Upload {
                const xhr = new XMLHttpRequest();
                let percent = 0;

+                // 监听中止信号
+                controller.signal.addEventListener('abort', () => {
+                    xhr.abort();
+                    reject(new DOMException('Upload aborted', 'AbortError'));
+                });
+
                xhr.upload.addEventListener("progress", (event) => {
                    if (event.lengthComputable) {
                        percent = Math.round((event.loaded / event.total) * 100);
@ -26,6 +51,7 @@ export class Upload {
                });

                xhr.onload = () => {
+                    this.controllers.delete(id); // 清理控制器
                    if (xhr.status >= 200 && xhr.status < 300) {
                        if (xhr.status === 204) {
                            resolve({ status: 204 });
@ -42,7 +68,21 @@ export class Upload {
                    }
                };

-                xhr.onerror = () => reject(new Error("Network Error"));
+                xhr.onerror = () => {
+                    this.controllers.delete(id);
+                    // 如果不是因为中止导致的错误
+                    if (!controller.signal.aborted) {
+                        reject(new Error("Network Error"));
+                    }
+                };
+
+                xhr.onabort = () => {
+                    this.controllers.delete(id);
+                    if (controller.signal.aborted) {
+                        reject(new DOMException('Upload aborted', 'AbortError'));
+                    }
+                };
+
                xhr.open(method, uploadUrl);

                if (isPut) {
@ -64,6 +104,9 @@ export class Upload {
        }

        // 无进度监听模式（直接 fetch）
+        try {
+            let result: Response;
+            
            if (isPut) {
                // S3 预签名上传
                const headers: Record<string, string> = {};
@ -71,12 +114,12 @@ export class Upload {
                    headers["Content-Type"] = file.type || "application/octet-stream";
                }

-            const result = await fetch(uploadUrl, {
+                result = await fetch(uploadUrl, {
                    method: "PUT",
                    headers,
                    body: file as any,
+                    signal: controller.signal, // 添加中止信号
                });
-            return result;
            } else {
                // 表单上传
                const formData2 = new FormData();
@ -85,11 +128,66 @@ export class Upload {
                }
                formData2.append(name || "file", file as File);

-            const result = await fetch(uploadUrl, {
+                result = await fetch(uploadUrl, {
                    method,
                    body: formData2,
+                    signal: controller.signal, // 添加中止信号
                });
+            }
+
+            this.controllers.delete(id); // 成功后清理控制器
            return result;
+
+        } catch (error) {
+            this.controllers.delete(id); // 失败后清理控制器
+            
+            // 人为中断返回204 使general-business处理成功
+            if (error instanceof DOMException && error.name === 'AbortError') {
+                return {
+                    status: 204,
+                };
+            }
+            throw error;
        }
    }
+
+    // 中断特定上传
+    abortUpload(uploadId: string): boolean {
+        const controller = this.controllers.get(uploadId);
+        if (controller) {
+            controller.abort();
+            this.controllers.delete(uploadId);
+            return true;
+        }
+        return false;
+    }
+
+    // 中断所有上传
+    abortAllUploads(): void {
+        this.controllers.forEach((controller, id) => {
+            controller.abort();
+        });
+        this.controllers.clear();
+    }
+
+    // 获取上传状态
+    getUploadStatus(uploadId: string): 'uploading' | 'completed' | 'aborted' | 'not-found' {
+        const controller = this.controllers.get(uploadId);
+        if (!controller) return 'not-found';
+        if (controller.signal.aborted) return 'aborted';
+        return 'uploading';
+    }
+
+    // 生成唯一的上传ID
+    private generateUploadId(file: File | string, uploadUrl: string): string {
+        const timestamp = Date.now();
+        const random = Math.random().toString(36).substring(2, 9);
+        const fileInfo = file instanceof File ? `${file.name}-${file.size}` : String(file);
+        return `${uploadUrl}-${fileInfo}-${timestamp}-${random}`;
+    }
+
+    // 获取所有进行中的上传任务
+    getActiveUploads(): string[] {
+        return Array.from(this.controllers.keys());
+    }
 }