feat: 接入大屏文件上传服务

src/api/axios.config.ts

@@ -14,8 +14,3 @@ export const fetchAllowList = [
 
 // 接口黑名单
 export const fetchBlockList = []
-
-// fts 接口列表（不添加 /Visual/v1 前缀）
-export const ftsList = [
-  '/Assets/v1/fts/uploader'
-]

src/api/axios.ts

@@ -5,8 +5,6 @@ import { StorageEnum } from '@/enums/storageEnum'
 import { axiosPre } from '@/settings/httpSetting'
 import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
 import { redirectErrorPage, getLocalStorage, routerTurnByName, isPreview } from '@/utils'
-import { fetchAllowList, ftsList } from './axios.config'
-import includes from 'lodash/includes'
 
 export interface MyResponseType<T> {
   code: ResultEnum
@@ -28,12 +26,6 @@ const axiosInstance = axios.create({
 
 axiosInstance.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
-    // fts 接口特殊处理：使用完整路径，不添加 /Visual/v1 前缀
-    if (config.url && includes(ftsList, config.url)) {
-      const baseUrl = import.meta.env.PROD ? import.meta.env.VITE_PRO_PATH : import.meta.env.VITE_DEV_PATH
-      config.baseURL = baseUrl
-    }
-    
     // 获取 token 并添加到所有请求
     const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
     if (info) {

src/api/fts.ts

@@ -1,29 +0,0 @@
-import { AxiosProgressEvent } from "axios";
-import axiosInstance from '@/api/axios'
-import { ContentTypeEnum } from '@/enums/httpEnum'
-
-/** 上传文件 */
-const FtsUpload = (data: any, onUploadProgress?: (progress: number) => void) => {
-  data.append('provider', 'local')
-  data.append('bucket', 'visual')
-  
-  // 使用完整URL，绕过 /Visual/v1 前缀
-  const baseUrl = import.meta.env.PROD ? import.meta.env.VITE_PRO_PATH : import.meta.env.VITE_DEV_PATH
-  
-  return axiosInstance({
-    url: `${baseUrl}/Assets/v1/fts/uploader`,
-    method: 'POST',
-    data,
-    headers: {
-      'Content-Type': ContentTypeEnum.FORM_DATA
-    },
-    onUploadProgress: onUploadProgress ? (progressEvent: AxiosProgressEvent) => {
-      if (progressEvent.total) {
-        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-        onUploadProgress(percentCompleted);
-      }
-    } : undefined
-  })
-}
-
-export default FtsUpload

src/api/path/project.api.ts

@@ -81,19 +81,3 @@ export const changeProjectReleaseApi = async (data: object) => {
     httpErrorHandle()
   }
 }
-
-// * 上传文件
-export const uploadFile = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.POST)<{
-      /**
-       * 文件地址
-       */
-      fileName: string,
-      fileurl: string,
-    }>(`${ModuleTypeEnum.PROJECT}/upload`, data, ContentTypeEnum.FORM_DATA)
-    return res
-  } catch {
-    httpErrorHandle()
-  }
-}

src/api/path/project.d.ts

@@ -21,6 +21,18 @@ export type ProjectItem = {
    * 预览图片url
    */
   indexImage: string
+  /**
+   * 预览图片 Files 标识
+   */
+  indexImageFileId: string
+  /**
+   * 背景图片url
+   */
+  backgroundImage: string
+  /**
+   * 背景图片 Files 标识
+   */
+  backgroundImageFileId: string
   /**
    * 创建者 identity
    */
@@ -36,4 +48,4 @@ export interface ProjectDetail extends ProjectItem {
    * 项目参数
    */
    content: string
-}
+}

src/api/projectFiles.ts

@@ -0,0 +1,57 @@
+import { http } from '@/api/http'
+import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
+
+export type ProjectImageKind = 'index' | 'background'
+
+interface PendingUpload {
+  file_id: string
+  object_key: string
+  upload: {
+    method: string
+    url: string
+    headers: Record<string, string>
+    expires_at: string
+  }
+}
+
+interface CompletedUpload {
+  file_id: string
+  url: string
+}
+
+/** 上传项目图片并由 Visual 完成文件绑定。 */
+export async function uploadProjectImage(
+  projectIdentity: string,
+  kind: ProjectImageKind,
+  file: File
+): Promise<CompletedUpload> {
+  const projectPath = `project/${encodeURIComponent(projectIdentity)}/images/${kind}`
+  const initResponse = await http(RequestHttpEnum.POST)<PendingUpload>(`${projectPath}/init`, {
+    filename: file.name,
+    size: file.size,
+    content_type: file.type || 'application/octet-stream'
+  })
+  const pendingUpload = initResponse.data
+  if (initResponse.code !== ResultEnum.SUCCESS || !pendingUpload?.file_id || !pendingUpload.upload?.url) {
+    throw new Error(initResponse.message || '初始化项目图片上传失败')
+  }
+
+  const uploadResponse = await fetch(pendingUpload.upload.url, {
+    method: pendingUpload.upload.method,
+    headers: pendingUpload.upload.headers,
+    body: file,
+    credentials: 'omit'
+  })
+  if (!uploadResponse.ok) {
+    throw new Error(`上传项目图片失败: HTTP ${uploadResponse.status}`)
+  }
+
+  const completeResponse = await http(RequestHttpEnum.POST)<CompletedUpload>(`${projectPath}/complete`, {
+    file_id: pendingUpload.file_id
+  })
+  const completedUpload = completeResponse.data
+  if (completeResponse.code !== ResultEnum.SUCCESS || !completedUpload?.file_id || !completedUpload.url) {
+    throw new Error(completeResponse.message || '完成项目图片上传失败')
+  }
+  return completedUpload
+}

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -126,27 +126,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { backgroundImageSize } from '@/settings/designSetting'
 import { swatchesColors } from '@/settings/chartThemes/index'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { useSystemStore } from '@/store/modules/systemStore/systemStore'
 import { StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { loadAsyncComponent, fetchRouteParamsLocation } from '@/utils'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
-import { ResultEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
-import { uploadFile } from '@/api/path'
-import FtsUpload from '@/api/fts'
+import { uploadProjectImage } from '@/api/projectFiles'
 
 const { ColorPaletteIcon } = icon.ionicons5
 const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon
 
 const chartEditStore = useChartEditStore()
-const systemStore = useSystemStore()
 const canvasConfig = chartEditStore.getEditCanvasConfig
 const editCanvas = chartEditStore.getEditCanvas
 
@@ -276,37 +272,23 @@ const clearColor = () => {
 }
 
 // 自定义上传操作
-const customRequest = (options: UploadCustomRequestOptions) => {
-  const { file } = options
-  nextTick(async () => {
-    if (file.file) {
-      // 修改名称
-      // const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
-      //   type: file.file.type
-      // })
-      let uploadParams = new FormData()
-      uploadParams.append('file', file.file)
-      const uploadRes: any = await FtsUpload(uploadParams)
-      if (uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
-        if (uploadRes.data.result_url) {
-          chartEditStore.setEditCanvasConfig(
-            EditCanvasConfigEnum.BACKGROUND_IMAGE,
-            uploadRes.data.result_url
-          )
-        } else {
-          // chartEditStore.setEditCanvasConfig(
-          //   EditCanvasConfigEnum.BACKGROUND_IMAGE,
-          //   `${systemStore.getFetchInfo.OSSUrl || ''}${uploadRes.data.fileName}?time=${new Date().getTime()}`
-          // )
-        }
-        chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
-        return
-      }
-      window['$message'].error('添加图片失败，请稍后重试！')
-    } else {
-      window['$message'].error('添加图片失败，请稍后重试！')
-    }
-  })
+const customRequest = async ({ file, onFinish, onError }: UploadCustomRequestOptions) => {
+  if (!file.file) {
+    onError()
+    window['$message'].error('添加图片失败，请稍后重试！')
+    return
+  }
+
+  try {
+    const result = await uploadProjectImage(fetchRouteParamsLocation(), 'background', file.file)
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, result.url)
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
+    onFinish()
+  } catch (error) {
+    console.error(error)
+    onError()
+    window['$message'].error('添加图片失败，请稍后重试！')
+  }
 }
 
 // 选择适配方式

src/views/chart/hooks/useSync.hook.ts

@@ -5,7 +5,6 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, ChartEditStorage, EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { StylesSetting } from '@/components/Pages/ChartItemSetting'
-import { useSystemStore } from '@/store/modules/systemStore/systemStore'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
@@ -14,8 +13,8 @@ import throttle from 'lodash/throttle'
 // 接口状态
 import { ResultEnum } from '@/enums/httpEnum'
 // 接口
-import { saveProjectApi, fetchProjectApi, uploadFile, updateProjectApi } from '@/api/path'
-import FtsUpload from '@/api/fts'
+import { saveProjectApi, fetchProjectApi } from '@/api/path'
+import { uploadProjectImage } from '@/api/projectFiles'
 // 画布枚举
 import { SyncEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
@@ -102,7 +101,6 @@ const componentMerge = (newObject: any, sources: any, notComponent = false) => {
 export const useSync = () => {
   const chartEditStore = useChartEditStore()
   const chartHistoryStore = useChartHistoryStore()
-  const systemStore = useSystemStore()
   const chartLayoutStore = useChartLayoutStore()
   /**
    * * 组件动态注册
@@ -317,22 +315,9 @@ export const useSync = () => {
           range.style.backgroundColor = originalBgColor
         }
 
-        // 上传预览图（使用 FtsUpload）
-        let uploadParams = new FormData()
-        uploadParams.append('file', base64toFile(canvasImage.toDataURL('image/png'), `${fetchRouteParamsLocation()}.png`))
-        // console.log(base64toFile(canvasImage.toDataURL('image/png'), `${fetchRouteParamsLocation()}_index_preview.png`))
-        const uploadRes: any = await FtsUpload(uploadParams)
-        
-        // 保存预览图
-        if(uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
-          if (uploadRes.data.result_url) {
-            await updateProjectApi({
-              identity: fetchRouteParamsLocation(),
-              indexImage: uploadRes.data.result_url,
-              backgroundImage: chartEditStore.getEditCanvasConfig.backgroundImage
-            })
-          }
-        }
+        const previewFile = base64toFile(canvasImage.toDataURL('image/png'), `${projectId}.png`)
+        const uploadResult = await uploadProjectImage(projectId, 'index', previewFile)
+        chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, uploadResult.url)
       }
     } catch (e) {
       console.log(e)