From 26b025aca0974096ce27b6f62f707b5fba1f0636 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Tue, 24 Sep 2024 20:54:12 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E3=80=91=E5=85=A8=E5=B1=80=EF=BC=9A=E7=A7=BB=E9=99=A4=20VITE?= =?UTF-8?q?=5FUPLOAD=5FURL=20=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F=EF=BC=8C?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=20getUploadUrl=20=E6=96=B9=E6=B3=95=E6=9B=BF?= =?UTF-8?q?=E4=BB=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.dev | 2 -- .env.local | 2 -- .env.prod | 2 -- .env.stage | 2 -- .env.test | 2 -- src/components/Editor/src/Editor.vue | 5 ++-- src/components/UploadFile/src/useUpload.ts | 31 ++++++++++++++-------- types/env.d.ts | 1 - 8 files changed, 23 insertions(+), 24 deletions(-) diff --git a/.env.dev b/.env.dev index 232f1c6b..2008a002 100644 --- a/.env.dev +++ b/.env.dev @@ -8,8 +8,6 @@ VITE_BASE_URL='http://api-dashboard.yudao.iocoder.cn' # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务 VITE_UPLOAD_TYPE=server -# 上传路径 -VITE_UPLOAD_URL='http://api-dashboard.yudao.iocoder.cn/admin-api/infra/file/upload' # 接口地址 VITE_API_URL=/admin-api diff --git a/.env.local b/.env.local index 005d2f0d..ad084700 100644 --- a/.env.local +++ b/.env.local @@ -8,8 +8,6 @@ VITE_BASE_URL='http://localhost:48080' # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务 VITE_UPLOAD_TYPE=server -# 上传路径 -VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload' # 接口地址 VITE_API_URL=/admin-api diff --git a/.env.prod b/.env.prod index 842ba616..8b78c415 100644 --- a/.env.prod +++ b/.env.prod @@ -8,8 +8,6 @@ VITE_BASE_URL='http://localhost:48080' # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务 VITE_UPLOAD_TYPE=server -# 上传路径 -VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload' # 接口地址 VITE_API_URL=/admin-api diff --git a/.env.stage b/.env.stage index f7c521bd..3d005c7b 100644 --- a/.env.stage +++ b/.env.stage @@ -8,8 +8,6 @@ VITE_BASE_URL='http://api-dashboard.yudao.iocoder.cn' # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务 VITE_UPLOAD_TYPE=server -# 上传路径 -VITE_UPLOAD_URL='http://api-dashboard.yudao.iocoder.cn/admin-api/infra/file/upload' # 接口地址 VITE_API_URL=/admin-api diff --git a/.env.test b/.env.test index 7bf1b417..80f4c660 100644 --- a/.env.test +++ b/.env.test @@ -8,8 +8,6 @@ VITE_BASE_URL='http://localhost:48080' # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务 VITE_UPLOAD_TYPE=server -# 上传路径 -VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload' # 接口地址 VITE_API_URL=/admin-api diff --git a/src/components/Editor/src/Editor.vue b/src/components/Editor/src/Editor.vue index 8dd06456..e16776c7 100644 --- a/src/components/Editor/src/Editor.vue +++ b/src/components/Editor/src/Editor.vue @@ -7,6 +7,7 @@ import { isNumber } from '@/utils/is' import { ElMessage } from 'element-plus' import { useLocaleStore } from '@/store/modules/locale' import { getAccessToken, getTenantId } from '@/utils/auth' +import { getUploadUrl } from '@/components/UploadFile/src/useUpload' defineOptions({ name: 'Editor' }) @@ -88,7 +89,7 @@ const editorConfig = computed((): IEditorConfig => { scroll: true, MENU_CONF: { ['uploadImage']: { - server: import.meta.env.VITE_UPLOAD_URL, + server: getUploadUrl(), // 单个文件的最大体积限制，默认为 2M maxFileSize: 5 * 1024 * 1024, // 最多可上传几个文件，默认为 100 @@ -136,7 +137,7 @@ const editorConfig = computed((): IEditorConfig => { } }, ['uploadVideo']: { - server: import.meta.env.VITE_UPLOAD_URL, + server: getUploadUrl(), // 单个文件的最大体积限制，默认为 10M maxFileSize: 10 * 1024 * 1024, // 最多可上传几个文件，默认为 100 diff --git a/src/components/UploadFile/src/useUpload.ts b/src/components/UploadFile/src/useUpload.ts index c0465a28..2981e12d 100644 --- a/src/components/UploadFile/src/useUpload.ts +++ b/src/components/UploadFile/src/useUpload.ts @@ -3,9 +3,16 @@ import CryptoJS from 'crypto-js' import { UploadRawFile, UploadRequestOptions } from 'element-plus/es/components/upload/src/upload' import axios from 'axios' +/** + * 获得上传 URL + */ +export const getUploadUrl = (): string => { + return import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/upload' +} + export const useUpload = () => { // 后端上传地址 - const uploadUrl = import.meta.env.VITE_UPLOAD_URL + const uploadUrl = getUploadUrl() // 是否使用前端直连上传 const isClientUpload = UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE // 重写ElUpload上传方法 @@ -17,16 +24,18 @@ export const useUpload = () => { // 1.2 获取文件预签名地址 const presignedInfo = await FileApi.getFilePresignedUrl(fileName) // 1.3 上传文件（不能使用 ElUpload 的 ajaxUpload 方法的原因：其使用的是 FormData 上传，Minio 不支持） - return axios.put(presignedInfo.uploadUrl, options.file, { - headers: { - 'Content-Type': options.file.type, - } - }).then(() => { - // 1.4. 记录文件信息到后端（异步） - createFile(presignedInfo, fileName, options.file) - // 通知成功，数据格式保持与后端上传的返回结果一致 - return { data: presignedInfo.url } - }) + return axios + .put(presignedInfo.uploadUrl, options.file, { + headers: { + 'Content-Type': options.file.type + } + }) + .then(() => { + // 1.4. 记录文件信息到后端（异步） + createFile(presignedInfo, fileName, options.file) + // 通知成功，数据格式保持与后端上传的返回结果一致 + return { data: presignedInfo.url } + }) } else { // 模式二：后端上传 // 重写 el-upload httpRequest 文件上传成功会走成功的钩子，失败走失败的钩子 diff --git a/types/env.d.ts b/types/env.d.ts index 1326e3b4..464dd5cf 100644 --- a/types/env.d.ts +++ b/types/env.d.ts @@ -19,7 +19,6 @@ interface ImportMetaEnv { readonly VITE_APP_DEFAULT_LOGIN_PASSWORD: string readonly VITE_APP_DOCALERT_ENABLE: string readonly VITE_BASE_URL: string - readonly VITE_UPLOAD_URL: string readonly VITE_API_URL: string readonly VITE_BASE_PATH: string readonly VITE_DROP_DEBUGGER: string