| | |
| | | // 浏览器端上传logo文件的工具函数 |
| | | import { uploadToCOS } from './cos' |
| | | |
| | | /** |
| | | * 将UI目录下的logo文件上传到COS |
| | | * 这个函数用于在浏览器中上传logo文件 |
| | | */ |
| | | export const uploadLogoToCOS = async (): Promise<{ |
| | | success: boolean |
| | | url?: string |
| | | error?: string |
| | | }> => { |
| | | try { |
| | | // 获取logo文件 |
| | | const logoFile = await fetchLogoFile() |
| | | |
| | | if (!logoFile) { |
| | | return { |
| | | success: false, |
| | | error: 'Logo文件不存在或无法访问' |
| | | } |
| | | } |
| | | |
| | | console.log('开始上传logo文件:', logoFile.name, logoFile.size, 'bytes') |
| | | |
| | | // 上传到COS的avatars目录 |
| | | const url = await uploadToCOS(logoFile, 'avatars/') |
| | | |
| | | console.log('Logo上传成功:', url) |
| | | |
| | | return { |
| | | success: true, |
| | | url: url |
| | | } |
| | | |
| | | } catch (error: any) { |
| | | console.error('Logo上传失败:', error) |
| | | return { |
| | | success: false, |
| | | error: error.message || '上传失败' |
| | | } |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * 获取logo文件 |
| | | * 由于浏览器安全限制,无法直接读取本地文件系统 |
| | | * 这里提供几种获取logo文件的方式 |
| | | */ |
| | | async function fetchLogoFile(): Promise<File | null> { |
| | | try { |
| | | // 方式1: 从public目录获取(如果logo文件放在public目录下) |
| | | const response = await fetch('/logo.jpg') |
| | | if (response.ok) { |
| | | const blob = await response.blob() |
| | | return new File([blob], 'logo.jpg', { type: 'image/jpeg' }) |
| | | } |
| | | } catch (error) { |
| | | console.log('从public目录获取logo失败,尝试其他方式') |
| | | } |
| | | |
| | | try { |
| | | // 方式2: 从UI目录获取(需要配置静态文件服务) |
| | | const response = await fetch('/UI/logo.jpg') |
| | | if (response.ok) { |
| | | const blob = await response.blob() |
| | | return new File([blob], 'logo.jpg', { type: 'image/jpeg' }) |
| | | } |
| | | } catch (error) { |
| | | console.log('从UI目录获取logo失败') |
| | | } |
| | | |
| | | // 方式3: 返回null,需要用户手动选择文件 |
| | | return null |
| | | } |
| | | |
| | | /** |
| | | * 创建一个logo文件选择器 |
| | | * 当无法自动获取logo文件时,让用户手动选择 |
| | | */ |
| | | export const createLogoFileSelector = (): Promise<File | null> => { |
| | | return new Promise((resolve) => { |
| | | const input = document.createElement('input') |
| | | input.type = 'file' |
| | | input.accept = 'image/*' |
| | | input.style.display = 'none' |
| | | |
| | | input.onchange = (event) => { |
| | | const target = event.target as HTMLInputElement |
| | | const file = target.files?.[0] |
| | | |
| | | if (file) { |
| | | // 验证是否为logo文件 |
| | | if (file.name.toLowerCase().includes('logo')) { |
| | | resolve(file) |
| | | } else { |
| | | console.warn('选择的文件名不包含"logo",请确认是否为正确的logo文件') |
| | | resolve(file) // 仍然返回文件,让用户决定 |
| | | } |
| | | } else { |
| | | resolve(null) |
| | | } |
| | | |
| | | // 清理DOM |
| | | document.body.removeChild(input) |
| | | } |
| | | |
| | | input.oncancel = () => { |
| | | resolve(null) |
| | | document.body.removeChild(input) |
| | | } |
| | | |
| | | document.body.appendChild(input) |
| | | input.click() |
| | | }) |
| | | // 浏览器端上传logo文件的工具函数
|
| | | import { uploadToCOS } from './cos'
|
| | |
|
| | | /**
|
| | | * 将UI目录下的logo文件上传到COS
|
| | | * 这个函数用于在浏览器中上传logo文件
|
| | | */
|
| | | export const uploadLogoToCOS = async (): Promise<{
|
| | | success: boolean
|
| | | url?: string
|
| | | error?: string
|
| | | }> => {
|
| | | try {
|
| | | // 获取logo文件
|
| | | const logoFile = await fetchLogoFile()
|
| | | |
| | | if (!logoFile) {
|
| | | return {
|
| | | success: false,
|
| | | error: 'Logo文件不存在或无法访问'
|
| | | }
|
| | | }
|
| | | |
| | | // 上传到COS的avatars目录
|
| | | const url = await uploadToCOS(logoFile, 'avatars/')
|
| | | |
| | | return {
|
| | | success: true,
|
| | | url: url
|
| | | }
|
| | | |
| | | } catch (error: any) {
|
| | | console.error('Logo上传失败:', error)
|
| | | return {
|
| | | success: false,
|
| | | error: error.message || '上传失败'
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | /**
|
| | | * 获取logo文件
|
| | | * 由于浏览器安全限制,无法直接读取本地文件系统
|
| | | * 这里提供几种获取logo文件的方式
|
| | | */
|
| | | async function fetchLogoFile(): Promise<File | null> {
|
| | | try {
|
| | | // 方式1: 从public目录获取(如果logo文件放在public目录下)
|
| | | const response = await fetch('/logo.jpg')
|
| | | if (response.ok) {
|
| | | const blob = await response.blob()
|
| | | return new File([blob], 'logo.jpg', { type: 'image/jpeg' })
|
| | | }
|
| | | } catch (error) {
|
| | | // 从public目录获取logo失败,尝试其他方式
|
| | | }
|
| | | |
| | | try {
|
| | | // 方式2: 从UI目录获取(需要配置静态文件服务)
|
| | | const response = await fetch('/UI/logo.jpg')
|
| | | if (response.ok) {
|
| | | const blob = await response.blob()
|
| | | return new File([blob], 'logo.jpg', { type: 'image/jpeg' })
|
| | | }
|
| | | } catch (error) {
|
| | | // 从UI目录获取logo失败
|
| | | }
|
| | | |
| | | // 方式3: 返回null,需要用户手动选择文件
|
| | | return null
|
| | | }
|
| | |
|
| | | /**
|
| | | * 创建一个logo文件选择器
|
| | | * 当无法自动获取logo文件时,让用户手动选择
|
| | | */
|
| | | export const createLogoFileSelector = (): Promise<File | null> => {
|
| | | return new Promise((resolve) => {
|
| | | const input = document.createElement('input')
|
| | | input.type = 'file'
|
| | | input.accept = 'image/*'
|
| | | input.style.display = 'none'
|
| | | |
| | | input.onchange = (event) => {
|
| | | const target = event.target as HTMLInputElement
|
| | | const file = target.files?.[0]
|
| | | |
| | | if (file) {
|
| | | // 验证是否为logo文件
|
| | | if (file.name.toLowerCase().includes('logo')) {
|
| | | resolve(file)
|
| | | } else {
|
| | | console.warn('选择的文件名不包含"logo",请确认是否为正确的logo文件')
|
| | | resolve(file) // 仍然返回文件,让用户决定
|
| | | }
|
| | | } else {
|
| | | resolve(null)
|
| | | }
|
| | | |
| | | // 清理DOM
|
| | | document.body.removeChild(input)
|
| | | }
|
| | | |
| | | input.oncancel = () => {
|
| | | resolve(null)
|
| | | document.body.removeChild(input)
|
| | | }
|
| | | |
| | | document.body.appendChild(input)
|
| | | input.click()
|
| | | })
|
| | | } |