diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index 95e4c6c..3994990 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -517,11 +517,30 @@ const handleRemoveBackground = async () => { processing.value = true resultImage.value = '' + // 处理成功结果的辅助函数(文件内部使用) + const handleSuccess = async (imageUrl: string): Promise => { + resultImage.value = imageUrl + await cacheResultImage(imageUrl) + + if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) { + const historyItem: HistoryItem = { + id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, + originalImageUrl: uploadedImageUrl.value, + originalImageFile: uploadedImage.value, + resultImage: imageUrl, + timestamp: Date.now() + } + historyList.value.unshift(historyItem) + currentHistoryIndex.value = 0 + } else if (currentHistoryIndex.value >= 0) { + historyList.value[currentHistoryIndex.value].resultImage = imageUrl + } + } + try { const formData = new FormData() formData.append('file', uploadedImage.value) - // 使用 fetch 处理流式响应(NDJSON 格式) const controller = new AbortController() const timeoutId = setTimeout(() => controller.abort(), 180000) @@ -537,7 +556,6 @@ const handleRemoveBackground = async () => { throw new Error(`HTTP error! status: ${response.status}`) } - // 读取流式响应(NDJSON 格式,每行一个 JSON 对象) const reader = response.body?.getReader() const decoder = new TextDecoder() let buffer = '' @@ -552,38 +570,17 @@ const handleRemoveBackground = async () => { buffer += decoder.decode(value, { stream: true }) const lines = buffer.split('\n') - buffer = lines.pop() || '' // 保留最后一个不完整的行 + buffer = lines.pop() || '' - // 处理完整的行 for (const line of lines) { if (line.trim()) { try { const result = JSON.parse(line.trim()) - - // 后端返回格式:{"status": "success", "image_url": "..."} if (result.status === 'success' && result.image_url) { - resultImage.value = result.image_url - - // 缓存图片 blob URL 用于下载 - await cacheResultImage(result.image_url) - - // 添加到历史记录 - if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) { - const historyItem: HistoryItem = { - id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, - originalImageUrl: uploadedImageUrl.value, - originalImageFile: uploadedImage.value, - resultImage: result.image_url, - timestamp: Date.now() - } - historyList.value.unshift(historyItem) - currentHistoryIndex.value = 0 - } else if (currentHistoryIndex.value >= 0) { - historyList.value[currentHistoryIndex.value].resultImage = result.image_url - } - return // 成功处理,退出 - } else { - message.error(result.error || t('Failed to remove background')) + await handleSuccess(result.image_url) + return + } else if (result.error) { + message.error(result.error) } } catch (parseError) { console.error('Failed to parse JSON:', parseError, 'Line:', line) @@ -597,22 +594,7 @@ const handleRemoveBackground = async () => { try { const result = JSON.parse(buffer.trim()) if (result.status === 'success' && result.image_url) { - resultImage.value = result.image_url - await cacheResultImage(result.image_url) - - if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) { - const historyItem: HistoryItem = { - id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, - originalImageUrl: uploadedImageUrl.value, - originalImageFile: uploadedImage.value, - resultImage: result.image_url, - timestamp: Date.now() - } - historyList.value.unshift(historyItem) - currentHistoryIndex.value = 0 - } else if (currentHistoryIndex.value >= 0) { - historyList.value[currentHistoryIndex.value].resultImage = result.image_url - } + await handleSuccess(result.image_url) return } else { message.error(result.error || t('Failed to remove background')) diff --git a/src/views/tools/remove_background/remove_background.vue b/src/views/tools/remove_background/remove_background.vue index 004a155..08428cc 100644 --- a/src/views/tools/remove_background/remove_background.vue +++ b/src/views/tools/remove_background/remove_background.vue @@ -608,11 +608,30 @@ const handleRemoveBackground = async () => { processing.value = true resultImage.value = '' + // 处理成功结果的辅助函数(文件内部使用) + const handleSuccess = async (imageUrl: string): Promise => { + resultImage.value = imageUrl + await cacheResultImage(imageUrl) + + if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) { + const historyItem: HistoryItem = { + id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, + originalImageUrl: uploadedImageUrl.value, + originalImageFile: uploadedImage.value, + resultImage: imageUrl, + timestamp: Date.now() + } + historyList.value.unshift(historyItem) + currentHistoryIndex.value = 0 + } else if (currentHistoryIndex.value >= 0) { + historyList.value[currentHistoryIndex.value].resultImage = imageUrl + } + } + try { const formData = new FormData() formData.append('file', uploadedImage.value) - // 使用 fetch 处理流式响应(NDJSON 格式) const controller = new AbortController() const timeoutId = setTimeout(() => controller.abort(), 180000) @@ -628,7 +647,6 @@ const handleRemoveBackground = async () => { throw new Error(`HTTP error! status: ${response.status}`) } - // 读取流式响应(NDJSON 格式,每行一个 JSON 对象) const reader = response.body?.getReader() const decoder = new TextDecoder() let buffer = '' @@ -643,37 +661,17 @@ const handleRemoveBackground = async () => { buffer += decoder.decode(value, { stream: true }) const lines = buffer.split('\n') - buffer = lines.pop() || '' // 保留最后一个不完整的行 + buffer = lines.pop() || '' - // 处理完整的行 for (const line of lines) { if (line.trim()) { try { const result = JSON.parse(line.trim()) - - // 后端返回格式:{"status": "success", "image_url": "..."} if (result.status === 'success' && result.image_url) { - resultImage.value = result.image_url - - // 缓存图片 blob URL 用于下载 - await cacheResultImage(result.image_url) - - if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) { - const historyItem: HistoryItem = { - id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, - originalImageUrl: uploadedImageUrl.value, - originalImageFile: uploadedImage.value, - resultImage: result.image_url, - timestamp: Date.now() - } - historyList.value.unshift(historyItem) - currentHistoryIndex.value = 0 - } else if (currentHistoryIndex.value >= 0) { - historyList.value[currentHistoryIndex.value].resultImage = result.image_url - } - return // 成功处理,退出 - } else { - message.error(result.error || t('Failed to remove background')) + await handleSuccess(result.image_url) + return + } else if (result.error) { + message.error(result.error) } } catch (parseError) { console.error('Failed to parse JSON:', parseError, 'Line:', line) @@ -687,22 +685,7 @@ const handleRemoveBackground = async () => { try { const result = JSON.parse(buffer.trim()) if (result.status === 'success' && result.image_url) { - resultImage.value = result.image_url - await cacheResultImage(result.image_url) - - if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) { - const historyItem: HistoryItem = { - id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, - originalImageUrl: uploadedImageUrl.value, - originalImageFile: uploadedImage.value, - resultImage: result.image_url, - timestamp: Date.now() - } - historyList.value.unshift(historyItem) - currentHistoryIndex.value = 0 - } else if (currentHistoryIndex.value >= 0) { - historyList.value[currentHistoryIndex.value].resultImage = result.image_url - } + await handleSuccess(result.image_url) return } else { message.error(result.error || t('Failed to remove background'))