refactor: 优化去背景工具代码,消除文件内部重复
- 在文件内部提取 handleSuccess 辅助函数,消除成功处理逻辑重复 - 简化流式响应处理代码,提高可读性和可维护性 - 保持工具文件独立性,符合设计原则
This commit is contained in:
parent
6b638ac143
commit
8f141188a3
@ -517,11 +517,30 @@ const handleRemoveBackground = async () => {
|
|||||||
processing.value = true
|
processing.value = true
|
||||||
resultImage.value = ''
|
resultImage.value = ''
|
||||||
|
|
||||||
|
// 处理成功结果的辅助函数(文件内部使用)
|
||||||
|
const handleSuccess = async (imageUrl: string): Promise<void> => {
|
||||||
|
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 {
|
try {
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('file', uploadedImage.value)
|
formData.append('file', uploadedImage.value)
|
||||||
|
|
||||||
// 使用 fetch 处理流式响应(NDJSON 格式)
|
|
||||||
const controller = new AbortController()
|
const controller = new AbortController()
|
||||||
const timeoutId = setTimeout(() => controller.abort(), 180000)
|
const timeoutId = setTimeout(() => controller.abort(), 180000)
|
||||||
|
|
||||||
@ -537,7 +556,6 @@ const handleRemoveBackground = async () => {
|
|||||||
throw new Error(`HTTP error! status: ${response.status}`)
|
throw new Error(`HTTP error! status: ${response.status}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 读取流式响应(NDJSON 格式,每行一个 JSON 对象)
|
|
||||||
const reader = response.body?.getReader()
|
const reader = response.body?.getReader()
|
||||||
const decoder = new TextDecoder()
|
const decoder = new TextDecoder()
|
||||||
let buffer = ''
|
let buffer = ''
|
||||||
@ -552,38 +570,17 @@ const handleRemoveBackground = async () => {
|
|||||||
|
|
||||||
buffer += decoder.decode(value, { stream: true })
|
buffer += decoder.decode(value, { stream: true })
|
||||||
const lines = buffer.split('\n')
|
const lines = buffer.split('\n')
|
||||||
buffer = lines.pop() || '' // 保留最后一个不完整的行
|
buffer = lines.pop() || ''
|
||||||
|
|
||||||
// 处理完整的行
|
|
||||||
for (const line of lines) {
|
for (const line of lines) {
|
||||||
if (line.trim()) {
|
if (line.trim()) {
|
||||||
try {
|
try {
|
||||||
const result = JSON.parse(line.trim())
|
const result = JSON.parse(line.trim())
|
||||||
|
|
||||||
// 后端返回格式:{"status": "success", "image_url": "..."}
|
|
||||||
if (result.status === 'success' && result.image_url) {
|
if (result.status === 'success' && result.image_url) {
|
||||||
resultImage.value = result.image_url
|
await handleSuccess(result.image_url)
|
||||||
|
return
|
||||||
// 缓存图片 blob URL 用于下载
|
} else if (result.error) {
|
||||||
await cacheResultImage(result.image_url)
|
message.error(result.error)
|
||||||
|
|
||||||
// 添加到历史记录
|
|
||||||
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'))
|
|
||||||
}
|
}
|
||||||
} catch (parseError) {
|
} catch (parseError) {
|
||||||
console.error('Failed to parse JSON:', parseError, 'Line:', line)
|
console.error('Failed to parse JSON:', parseError, 'Line:', line)
|
||||||
@ -597,22 +594,7 @@ const handleRemoveBackground = async () => {
|
|||||||
try {
|
try {
|
||||||
const result = JSON.parse(buffer.trim())
|
const result = JSON.parse(buffer.trim())
|
||||||
if (result.status === 'success' && result.image_url) {
|
if (result.status === 'success' && result.image_url) {
|
||||||
resultImage.value = result.image_url
|
await handleSuccess(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
|
|
||||||
}
|
|
||||||
return
|
return
|
||||||
} else {
|
} else {
|
||||||
message.error(result.error || t('Failed to remove background'))
|
message.error(result.error || t('Failed to remove background'))
|
||||||
|
|||||||
@ -608,11 +608,30 @@ const handleRemoveBackground = async () => {
|
|||||||
processing.value = true
|
processing.value = true
|
||||||
resultImage.value = ''
|
resultImage.value = ''
|
||||||
|
|
||||||
|
// 处理成功结果的辅助函数(文件内部使用)
|
||||||
|
const handleSuccess = async (imageUrl: string): Promise<void> => {
|
||||||
|
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 {
|
try {
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('file', uploadedImage.value)
|
formData.append('file', uploadedImage.value)
|
||||||
|
|
||||||
// 使用 fetch 处理流式响应(NDJSON 格式)
|
|
||||||
const controller = new AbortController()
|
const controller = new AbortController()
|
||||||
const timeoutId = setTimeout(() => controller.abort(), 180000)
|
const timeoutId = setTimeout(() => controller.abort(), 180000)
|
||||||
|
|
||||||
@ -628,7 +647,6 @@ const handleRemoveBackground = async () => {
|
|||||||
throw new Error(`HTTP error! status: ${response.status}`)
|
throw new Error(`HTTP error! status: ${response.status}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 读取流式响应(NDJSON 格式,每行一个 JSON 对象)
|
|
||||||
const reader = response.body?.getReader()
|
const reader = response.body?.getReader()
|
||||||
const decoder = new TextDecoder()
|
const decoder = new TextDecoder()
|
||||||
let buffer = ''
|
let buffer = ''
|
||||||
@ -643,37 +661,17 @@ const handleRemoveBackground = async () => {
|
|||||||
|
|
||||||
buffer += decoder.decode(value, { stream: true })
|
buffer += decoder.decode(value, { stream: true })
|
||||||
const lines = buffer.split('\n')
|
const lines = buffer.split('\n')
|
||||||
buffer = lines.pop() || '' // 保留最后一个不完整的行
|
buffer = lines.pop() || ''
|
||||||
|
|
||||||
// 处理完整的行
|
|
||||||
for (const line of lines) {
|
for (const line of lines) {
|
||||||
if (line.trim()) {
|
if (line.trim()) {
|
||||||
try {
|
try {
|
||||||
const result = JSON.parse(line.trim())
|
const result = JSON.parse(line.trim())
|
||||||
|
|
||||||
// 后端返回格式:{"status": "success", "image_url": "..."}
|
|
||||||
if (result.status === 'success' && result.image_url) {
|
if (result.status === 'success' && result.image_url) {
|
||||||
resultImage.value = result.image_url
|
await handleSuccess(result.image_url)
|
||||||
|
return
|
||||||
// 缓存图片 blob URL 用于下载
|
} else if (result.error) {
|
||||||
await cacheResultImage(result.image_url)
|
message.error(result.error)
|
||||||
|
|
||||||
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'))
|
|
||||||
}
|
}
|
||||||
} catch (parseError) {
|
} catch (parseError) {
|
||||||
console.error('Failed to parse JSON:', parseError, 'Line:', line)
|
console.error('Failed to parse JSON:', parseError, 'Line:', line)
|
||||||
@ -687,22 +685,7 @@ const handleRemoveBackground = async () => {
|
|||||||
try {
|
try {
|
||||||
const result = JSON.parse(buffer.trim())
|
const result = JSON.parse(buffer.trim())
|
||||||
if (result.status === 'success' && result.image_url) {
|
if (result.status === 'success' && result.image_url) {
|
||||||
resultImage.value = result.image_url
|
await handleSuccess(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
|
|
||||||
}
|
|
||||||
return
|
return
|
||||||
} else {
|
} else {
|
||||||
message.error(result.error || t('Failed to remove background'))
|
message.error(result.error || t('Failed to remove background'))
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user