当前位置：首页 > news >正文

在前端ts代码中调用后端API实现具体算法 - f

news 2026/5/12 0:05:40

要在 TypeScript 代码中调用后端 API 实现实际的增强算法，你可以使用 fetch API 或 axios 库。以下是具体的实现步骤：

1. 使用 `fetch` API 调用后端 API

步骤 1：修改 `enhanceMedia` 函数

将前端的 TensorFlow.js 处理替换为调用后端 API：

async function enhanceMedia(inputPath: string) {enhanceStatus.value = 'processing'try {// 检查是否是 blob URLif (inputPath.startsWith('blob:')) {// 从 blob URL 获取图像数据const response = await fetch(inputPath)const blob = await response.blob()// 创建 FormData 对象const formData = new FormData()formData.append('image', blob, 'input.jpg')// 调用后端 APIconst apiResponse = await fetch('http://your-backend-api/enhance', {method: 'POST',body: formData})if (!apiResponse.ok) {throw new Error('API 请求失败')}// 获取增强后的图像const enhancedBlob = await apiResponse.blob()// 更新当前媒体 URLcurrentMediaUrl.value = URL.createObjectURL(enhancedBlob)console.log('✅ 图像增强成功（后端 API）')} else {console.log('📁 处理本地路径：', inputPath)}enhanceStatus.value = 'success'console.log('✅ 增强成功：', inputPath)} catch (error) {enhanceStatus.value = 'error'console.error('增强失败：', error)}
}

2. 使用 `axios` 库（推荐）

步骤 1：安装 `axios`

npm install axios

步骤 2：导入并使用 `axios`

import axios from 'axios'async function enhanceMedia(inputPath: string) {enhanceStatus.value = 'processing'try {if (inputPath.startsWith('blob:')) {const response = await fetch(inputPath)const blob = await response.blob()const formData = new FormData()formData.append('image', blob, 'input.jpg')// 调用后端 APIconst apiResponse = await axios.post('http://your-backend-api/enhance', formData, {headers: {'Content-Type': 'multipart/form-data'},responseType: 'blob' // 重要：设置响应类型为 blob})// 获取增强后的图像const enhancedBlob = apiResponse.data// 更新当前媒体 URLcurrentMediaUrl.value = URL.createObjectURL(enhancedBlob)console.log('✅ 图像增强成功（后端 API）')}enhanceStatus.value = 'success'} catch (error) {enhanceStatus.value = 'error'console.error('增强失败：', error)}
}

3. 后端 API 设计建议

后端 API 应该：

接受 multipart/form-data 格式的图像文件
对图像进行增强处理
返回增强后的图像（Content-Type: image/jpeg 或 image/png）

示例后端 API 响应头：

Content-Type: image/jpeg
Content-Disposition: inline; filename="enhanced.jpg"

4. 错误处理和边界情况

网络错误：处理 fetch 或 axios 的网络错误
API 错误：检查 HTTP 状态码，处理后端返回的错误信息
超时处理：设置请求超时，避免长时间等待
文件大小限制：处理大文件的情况，可能需要分块上传

5. 完整代码示例

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import axios from 'axios'
import type {EnvironmentParams,InferenceResult,QuantifyResult,DataPoint,ModuleStatus,MediaType,
} from '@/types'export const useAnalysisStore = defineStore('analysis', () => {// ... 其他状态和函数 ...async function enhanceMedia(inputPath: string) {enhanceStatus.value = 'processing'try {if (inputPath.startsWith('blob:')) {// 获取原始图像const response = await fetch(inputPath)const blob = await response.blob()// 准备 API 请求const formData = new FormData()formData.append('image', blob, 'input.jpg')// 调用后端 APIconst apiResponse = await axios.post('http://your-backend-api/enhance', formData, {headers: {'Content-Type': 'multipart/form-data'},responseType: 'blob',timeout: 30000 // 30秒超时})// 处理响应const enhancedBlob = apiResponse.datacurrentMediaUrl.value = URL.createObjectURL(enhancedBlob)console.log('✅ 图像增强成功（后端 API）')}enhanceStatus.value = 'success'} catch (error) {enhanceStatus.value = 'error'console.error('增强失败：', error)// 错误处理：显示用户友好的错误信息if (axios.isAxiosError(error)) {if (error.code === 'ECONNABORTED') {console.error('请求超时，请检查网络连接')} else if (error.response) {console.error('API 错误：', error.response.status, error.response.data)}}}}// ... 其他函数 ...
})