From 68a8e3e5c40215ec42885686e3fd6c31c5ef8377 Mon Sep 17 00:00:00 2001 From: landaiqing Date: Wed, 18 Dec 2024 01:07:10 +0800 Subject: [PATCH] :sparkles: complete mobile image upload --- .env.development | 7 +- .env.production | 7 +- components.d.ts | 15 ++ package.json | 6 +- src/api/upscale/index.ts | 15 ++ src/assets/svgs/deleted.svg | 1 + src/assets/svgs/qr-phone.svg | 12 +- src/layout/default/Sidebar/Sidebar.vue | 5 +- src/locales/language/en.ts | 4 + src/locales/language/zh.ts | 4 + src/router/modules/main_router.ts | 6 +- src/router/modules/phone_upload.ts | 11 ++ src/router/router.ts | 2 + src/store/modules/upscaleStore.ts | 22 ++- src/store/modules/websocketStore.ts | 11 +- src/types/upscale.d.ts | 15 +- .../adapter/localforageStorageAdapter.ts | 3 +- src/utils/imageUtils/blobToBase64.ts | 22 +++ src/views/PhoneUpload/PhoneUpload.vue | 146 +++++++++++++++ src/views/RecyclingBin/RecyclingBin.vue | 2 +- src/views/Upscale/CompareImage.vue | 171 ++++++++++++++++-- src/views/Upscale/ParameterSetting.vue | 4 +- src/views/Upscale/UploadImage.vue | 2 +- src/views/Upscale/index.vue | 38 +++- src/vite-env.d.ts | 3 +- src/workers/upscale.worker.ts | 4 - 26 files changed, 455 insertions(+), 83 deletions(-) create mode 100644 src/api/upscale/index.ts create mode 100644 src/assets/svgs/deleted.svg create mode 100644 src/router/modules/phone_upload.ts create mode 100644 src/utils/imageUtils/blobToBase64.ts create mode 100644 src/views/PhoneUpload/PhoneUpload.vue diff --git a/.env.development b/.env.development index 83fd53e..58c3539 100644 --- a/.env.development +++ b/.env.development @@ -3,9 +3,8 @@ VITE_NODE_ENV='development' # 开发环境 VITE_APP_BASE_API='/sys' - -# 页面 title 前缀 -VITE_APP_TITLE=开发环境 +# 网站域名 +VITE_APP_WEB_URL='http://localhost:5173' # 网络请求公用地址 VITE_API_BASE_URL='http://127.0.0.1:80' @@ -20,4 +19,6 @@ VITE_QR_SOCKET_URL='ws://127.0.0.1:80/api/ws/qrcode' VITE_MESSAGE_SOCKET_URL='ws://127.0.0.1:80/api/ws/message' +VITE_FILE_SOCKET_URL='ws://127.0.0.1:80/api/ws/file' + VITE_FINGERPRINT_KEY='idm0jdoau38lwourb4pbjk4dxkat0kcx' diff --git a/.env.production b/.env.production index d04ff66..8109966 100644 --- a/.env.production +++ b/.env.production @@ -3,8 +3,8 @@ VITE_NODE_ENV='production' # 生产环境 VITE_APP_BASE_API='/sys' -# 页面 title 前缀 -VITE_APP_TITLE=生产环境 +# 网站域名 +VITE_APP_WEB_URL='http://localhost:5173' # 网络请求公用地址 VITE_API_BASE_URL='https://landaiqing.cn' @@ -18,5 +18,8 @@ VITE_APP_TOKEN_KEY='Bearer' VITE_QR_SOCKET_URL='wss://landaiqing.cn/api/ws/qr_ws' VITE_MESSAGE_SOCKET_URL='wss://landaiqing.cn/api/ws/message_ws' + +VITE_FILE_SOCKET_URL='ws://127.0.0.1:80/api/ws/file' + # 签名密钥 VITE_FINGERPRINT_KEY='idm0jdoau38lwourb4pbjk4dxkat0kcx' diff --git a/components.d.ts b/components.d.ts index 8f5e1b0..795ad47 100644 --- a/components.d.ts +++ b/components.d.ts @@ -27,21 +27,30 @@ declare module 'vue' { AInput: typeof import('ant-design-vue/es')['Input'] AInputPassword: typeof import('ant-design-vue/es')['InputPassword'] Alert: typeof import('./src/components/MyUI/Alert/Alert.vue')['default'] + AList: typeof import('ant-design-vue/es')['List'] + AListItem: typeof import('ant-design-vue/es')['ListItem'] AllPhoto: typeof import('./src/views/Photograph/AllPhoto/AllPhoto.vue')['default'] AMenu: typeof import('ant-design-vue/es')['Menu'] AMenuItem: typeof import('ant-design-vue/es')['MenuItem'] AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup'] AModal: typeof import('ant-design-vue/es')['Modal'] AnimatedNature: typeof import('./src/components/AnimatedNature/AnimatedNature.vue')['default'] + APagination: typeof import('ant-design-vue/es')['Pagination'] APopover: typeof import('ant-design-vue/es')['Popover'] AProgress: typeof import('ant-design-vue/es')['Progress'] AQrcode: typeof import('ant-design-vue/es')['QRCode'] + ARadio: typeof import('ant-design-vue/es')['Radio'] + ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup'] ASelect: typeof import('ant-design-vue/es')['Select'] + ASkeleton: typeof import('ant-design-vue/es')['Skeleton'] + ASpace: typeof import('ant-design-vue/es')['Space'] ASpin: typeof import('ant-design-vue/es')['Spin'] ATabPane: typeof import('ant-design-vue/es')['TabPane'] ATabs: typeof import('ant-design-vue/es')['Tabs'] ATag: typeof import('ant-design-vue/es')['Tag'] + ATextarea: typeof import('ant-design-vue/es')['Textarea'] ATooltip: typeof import('ant-design-vue/es')['Tooltip'] + AUpload: typeof import('ant-design-vue/es')['Upload'] AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger'] Avatar: typeof import('./src/components/MyUI/Avatar/Avatar.vue')['default'] BackgroundAnimation: typeof import('./src/components/BackgroundAnimation/BackgroundAnimation.vue')['default'] @@ -55,6 +64,7 @@ declare module 'vue' { Carousel: typeof import('./src/components/MyUI/Carousel/Carousel.vue')['default'] Cascader: typeof import('./src/components/MyUI/Cascader/Cascader.vue')['default'] Checkbox: typeof import('./src/components/MyUI/Checkbox/Checkbox.vue')['default'] + CloseCircleOutlined: typeof import('@ant-design/icons-vue')['CloseCircleOutlined'] Clouds: typeof import('./src/components/Clouds/Clouds.vue')['default'] Col: typeof import('./src/components/MyUI/Grid/Col.vue')['default'] Collapse: typeof import('./src/components/MyUI/Collapse/Collapse.vue')['default'] @@ -71,6 +81,7 @@ declare module 'vue' { DynamicTitle: typeof import('./src/components/DynamicTitle/DynamicTitle.vue')['default'] Ellipsis: typeof import('./src/components/MyUI/Ellipsis/Ellipsis.vue')['default'] Empty: typeof import('./src/components/MyUI/Empty/Empty.vue')['default'] + EyeOutlined: typeof import('@ant-design/icons-vue')['EyeOutlined'] Flex: typeof import('./src/components/MyUI/Flex/Flex.vue')['default'] FloatButton: typeof import('./src/components/MyUI/FloatButton/FloatButton.vue')['default'] Folder: typeof import('./src/components/Folder/Folder.vue')['default'] @@ -100,6 +111,8 @@ declare module 'vue' { ParameterSetting: typeof import('./src/views/Upscale/ParameterSetting.vue')['default'] PeopleAlbum: typeof import('./src/views/Album/PeopleAlbum/PeopleAlbum.vue')['default'] Phoalbum: typeof import('./src/views/Album/Phoalbum/Phoalbum.vue')['default'] + PhoneUpload: typeof import('./src/views/PhoneUpload/PhoneUpload.vue')['default'] + PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined'] Popconfirm: typeof import('./src/components/MyUI/Popconfirm/Popconfirm.vue')['default'] Popover: typeof import('./src/components/MyUI/Popover/Popover.vue')['default'] Progress: typeof import('./src/components/MyUI/Progress/Progress.vue')['default'] @@ -121,6 +134,7 @@ declare module 'vue' { Scrollbar: typeof import('./src/components/MyUI/Scrollbar/Scrollbar.vue')['default'] Segmented: typeof import('./src/components/MyUI/Segmented/Segmented.vue')['default'] Select: typeof import('./src/components/MyUI/Select/Select.vue')['default'] + SendOutlined: typeof import('@ant-design/icons-vue')['SendOutlined'] Skeleton: typeof import('./src/components/MyUI/Skeleton/Skeleton.vue')['default'] Slider: typeof import('./src/components/MyUI/Slider/Slider.vue')['default'] Space: typeof import('./src/components/MyUI/Space/Space.vue')['default'] @@ -147,6 +161,7 @@ declare module 'vue' { UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined'] Video: typeof import('./src/components/MyUI/Video/Video.vue')['default'] VueCompareImage: typeof import('./src/components/VueCompareImage/VueCompareImage.vue')['default'] + WarningOutlined: typeof import('@ant-design/icons-vue')['WarningOutlined'] Waterfall: typeof import('./src/components/MyUI/Waterfall/Waterfall.vue')['default'] } } diff --git a/package.json b/package.json index 40e831b..87d6a72 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "docker-build": "docker build -t schisandra/schisandra-cloud-album-front ." }, "dependencies": { - "@alova/adapter-axios": "^2.0.11", + "@alova/adapter-axios": "^2.0.12", "@ant-design/icons-vue": "^7.0.1", "@tensorflow/tfjs": "^4.22.0", "@tensorflow/tfjs-backend-webgl": "^4.22.0", @@ -24,7 +24,7 @@ "@vuepic/vue-datepicker": "^10.0.0", "@vueuse/core": "^12.0.0", "@vueuse/integrations": "^12.0.0", - "alova": "^3.2.6", + "alova": "^3.2.7", "animejs": "^3.2.2", "ant-design-vue": "^4.2.6", "autofit.js": "^3.2.2", @@ -64,7 +64,7 @@ "globals": "^15.13.0", "sass": "^1.83.0", "typescript": "^5.6.3", - "typescript-eslint": "^8.18.0", + "typescript-eslint": "^8.18.1", "unplugin-vue-components": "^0.28.0", "vite": "^6.0.3", "vite-plugin-bundle-obfuscator": "1.4.0", diff --git a/src/api/upscale/index.ts b/src/api/upscale/index.ts new file mode 100644 index 0000000..ffbf4ea --- /dev/null +++ b/src/api/upscale/index.ts @@ -0,0 +1,15 @@ +import {service} from "@/utils/alova/service.ts"; +import {uploadImageRequest} from "@/types/upscale"; + +export const uploadImage = (data: uploadImageRequest) => { + return service.Post('/api/auth/upscale/upload', { + image: data.image, + access_token: data.access_token, + user_id: data.user_id, + }, { + meta: { + ignoreToken: false, + signature: true + } + }); +}; diff --git a/src/assets/svgs/deleted.svg b/src/assets/svgs/deleted.svg new file mode 100644 index 0000000..d6a073b --- /dev/null +++ b/src/assets/svgs/deleted.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/qr-phone.svg b/src/assets/svgs/qr-phone.svg index 3319861..68ee362 100644 --- a/src/assets/svgs/qr-phone.svg +++ b/src/assets/svgs/qr-phone.svg @@ -1,11 +1 @@ - - - - - - + diff --git a/src/layout/default/Sidebar/Sidebar.vue b/src/layout/default/Sidebar/Sidebar.vue index 93a66f9..7f51a08 100644 --- a/src/layout/default/Sidebar/Sidebar.vue +++ b/src/layout/default/Sidebar/Sidebar.vue @@ -2,7 +2,7 @@
import('@/views/Upscale/index.vue'), meta: { - requiresAuth: false, + requiresAuth: true, title: '图像修复' - } + }, }, { path: '/main/photo/share', name: 'share', component: () => import('@/views/ImageShare/ImageShare.vue'), meta: { - requiresAuth: false, + requiresAuth: true, title: '快传' } } diff --git a/src/router/modules/phone_upload.ts b/src/router/modules/phone_upload.ts new file mode 100644 index 0000000..fff5f48 --- /dev/null +++ b/src/router/modules/phone_upload.ts @@ -0,0 +1,11 @@ +export default [ + { + path: '/upscale/app', + name: 'upscaleApp', + component: () => import('@/views/PhoneUpload/PhoneUpload.vue'), + meta: { + requiresAuth: false, + title: '手机上传' + } + } +]; diff --git a/src/router/router.ts b/src/router/router.ts index dd442d9..d37998d 100644 --- a/src/router/router.ts +++ b/src/router/router.ts @@ -7,12 +7,14 @@ import notFound from "./modules/not_found.ts"; import landing from "./modules/landing.ts"; import mainRouter from "./modules/main_router.ts"; import i18n from "@/locales"; +import phone_upload from "@/router/modules/phone_upload.ts"; const routes: Array = [ ...login, ...notFound, ...landing, ...mainRouter, + ...phone_upload, { path: '/:pathMatch(.*)', redirect: '/404', diff --git a/src/store/modules/upscaleStore.ts b/src/store/modules/upscaleStore.ts index c5459f6..32218d9 100644 --- a/src/store/modules/upscaleStore.ts +++ b/src/store/modules/upscaleStore.ts @@ -54,13 +54,7 @@ export const useUpscaleStore = defineStore( fileData.value = urlData; await loadImg(image); uploading.value = false; - - imageData.value = ""; - processedImg.value = ""; - isDone.value = false; - msg.value = ""; - progressBar.value = 0; - + await clear(); return true; } @@ -68,10 +62,21 @@ export const useUpscaleStore = defineStore( * 自定义上传图片请求 */ async function customUploadRequest(_file: any) { - imageData.value = fileData.value; } + /** + * 清空数据 + */ + async function clear() { + imageData.value = ""; + processedImg.value = ""; + isDone.value = false; + msg.value = ""; + progressBar.value = 0; + isProcessing.value = false; + } + /** * 加载图片 * @param img @@ -117,6 +122,7 @@ export const useUpscaleStore = defineStore( isProcessing, msg, progressBar, + loadImg, beforeUpload, customUploadRequest, }; diff --git a/src/store/modules/websocketStore.ts b/src/store/modules/websocketStore.ts index a894b57..23a375b 100644 --- a/src/store/modules/websocketStore.ts +++ b/src/store/modules/websocketStore.ts @@ -10,6 +10,9 @@ export const useWebSocketStore = defineStore('websocket', () => { wsService: null as WebSocketService | null, }); + const readyState = ref(WebSocket.CLOSED); + + function initialize(options: { url: string; protocols?: string | string[]; @@ -17,6 +20,7 @@ export const useWebSocketStore = defineStore('websocket', () => { }) { state.wsService = new WebSocketService(options); state.wsService?.open(); + readyState.value = WebSocket.OPEN; } function sendMessage(data: any) { @@ -33,12 +37,9 @@ export const useWebSocketStore = defineStore('websocket', () => { function close(isActiveClose: boolean) { state.wsService?.close(isActiveClose); + readyState.value = WebSocket.CLOSED; } - // 新增的获取 WebSocket 状态的方法 - function getReadyState() { - return state.wsService ? state.wsService.getReadyState() : WebSocket.CLOSED; - } return { initialize, @@ -46,7 +47,7 @@ export const useWebSocketStore = defineStore('websocket', () => { on, onEvent, close, - getReadyState + readyState, }; }, { persistedState: { diff --git a/src/types/upscale.d.ts b/src/types/upscale.d.ts index d85dc0b..539b7ab 100644 --- a/src/types/upscale.d.ts +++ b/src/types/upscale.d.ts @@ -1,12 +1,5 @@ -export interface ImageData { - model_type: string; - model: string; - factor: number; - tile_size: number; - backend: string; - width: number; - height: number; - input: any; - hasAlpha: boolean; - min_lap: number; +export interface uploadImageRequest { + image: string; + access_token: string; + user_id: string; } diff --git a/src/utils/alova/adapter/localforageStorageAdapter.ts b/src/utils/alova/adapter/localforageStorageAdapter.ts index d743c8d..31852cc 100644 --- a/src/utils/alova/adapter/localforageStorageAdapter.ts +++ b/src/utils/alova/adapter/localforageStorageAdapter.ts @@ -6,8 +6,7 @@ export const localforageStorageAdapter = { await localforage.setItem(key, value); }, async get(key: string) { - const res: any = await localforage.getItem(key); - return res ? JSON.parse(res) : null; + return await localforage.getItem(key); }, async remove(key: any) { await localforage.removeItem(key); diff --git a/src/utils/imageUtils/blobToBase64.ts b/src/utils/imageUtils/blobToBase64.ts new file mode 100644 index 0000000..88cb449 --- /dev/null +++ b/src/utils/imageUtils/blobToBase64.ts @@ -0,0 +1,22 @@ +export async function blobToBase64(blobUrl: string): Promise { + try { + const response = await fetch(blobUrl); + const blob = await response.blob(); + const reader = new FileReader(); + + return new Promise((resolve, reject) => { + reader.onload = function () { + // 直接使用 reader.result，包含 MIME 类型前缀 + const base64StringWithPrefix = reader.result!.toString(); + resolve(base64StringWithPrefix); + }; + reader.onerror = function () { + reject("File could not be read"); + }; + // 读取 Blob 文件到 Data URL 格式 + reader.readAsDataURL(blob); + }); + } catch (error) { + throw new Error("Error fetching blob from URL: " + error); + } +} diff --git a/src/views/PhoneUpload/PhoneUpload.vue b/src/views/PhoneUpload/PhoneUpload.vue new file mode 100644 index 0000000..a0e160d --- /dev/null +++ b/src/views/PhoneUpload/PhoneUpload.vue @@ -0,0 +1,146 @@ + + + diff --git a/src/views/RecyclingBin/RecyclingBin.vue b/src/views/RecyclingBin/RecyclingBin.vue index 633c11f..ef38549 100644 --- a/src/views/RecyclingBin/RecyclingBin.vue +++ b/src/views/RecyclingBin/RecyclingBin.vue @@ -1,5 +1,5 @@ diff --git a/src/views/Upscale/CompareImage.vue b/src/views/Upscale/CompareImage.vue index 5dde30c..d0d5117 100644 --- a/src/views/Upscale/CompareImage.vue +++ b/src/views/Upscale/CompareImage.vue @@ -11,20 +11,24 @@ @touchmove="touchMove" @touchend="touchEnd" > -
+ +
{{ store.msg }}
- + + +
-
- +
+ 手机扫码上传
- + +
+ + + + + + + + + + + + + + + + + + + + + + +