From 62404bef25f97b179f99e68ce37c76940b276e06 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Sun, 18 Jan 2026 15:09:55 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=AF=8C=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E5=A4=9A=E9=80=89=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=88=E5=90=8C=E6=97=B6?= =?UTF-8?q?=E5=AF=B9=20token=20=E8=BF=87=E6=9C=9F=E6=9B=B4=E5=8F=8B?= =?UTF-8?q?=E5=A5=BD=EF=BC=89=EF=BC=8C=E5=AF=B9=E5=BA=94=20https://t.zsxq.?= =?UTF-8?q?com/pKpGk?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Editor/src/Editor.vue | 137 +++++++-------------------- 1 file changed, 35 insertions(+), 102 deletions(-) diff --git a/src/components/Editor/src/Editor.vue b/src/components/Editor/src/Editor.vue index 30146be37..790319d2d 100644 --- a/src/components/Editor/src/Editor.vue +++ b/src/components/Editor/src/Editor.vue @@ -6,8 +6,7 @@ import { propTypes } from '@/utils/propTypes' import { isNumber } from '@/utils/is' import { ElMessage } from 'element-plus' import { useLocaleStore } from '@/store/modules/locale' -import { getRefreshToken, getTenantId } from '@/utils/auth' -import { getUploadUrl } from '@/components/UploadFile/src/useUpload' +import { useUpload } from '@/components/UploadFile/src/useUpload' import merge from 'lodash-es/merge' defineOptions({ name: 'Editor' }) @@ -34,6 +33,10 @@ const props = defineProps({ const emit = defineEmits(['change', 'update:modelValue']) +// 使用项目的上传方法，实现逐个文件上传 +const { httpRequest: imageHttpRequest } = useUpload(`${props.directory}-image`) +const { httpRequest: videoHttpRequest } = useUpload(`${props.directory}-video`) + // 编辑器实例，必须用 shallowRef const editorRef = shallowRef() @@ -114,7 +117,6 @@ const editorConfig = computed((): IEditorConfig => { }, MENU_CONF: { ['uploadImage']: { - server: getUploadUrl(), // 单个文件的最大体积限制，默认为 2M maxFileSize: 10 * 1024 * 1024, // 最多可上传几个文件，默认为 100 @@ -122,60 +124,25 @@ const editorConfig = computed((): IEditorConfig => { // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 [] allowedFileTypes: ['image/*'], - // 自定义增加 http header - headers: { - Accept: '*', - Authorization: 'Bearer ' + getRefreshToken(), // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：Editor 无法方便的刷新访问令牌 - 'tenant-id': getTenantId() - }, - - // 超时时间，默认为 10 秒 - timeout: 15 * 1000, // 15 秒 - - // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image - fieldName: 'file', - // 附加参数 - meta: { - directory: `${props.directory}-image` - }, - metaWithUrl: false, - - // uppy 配置项 - uppyConfig: { - onBeforeFileAdded: (newFile: any) => { - newFile.id = `${newFile.id}-${Date.now()}` - return newFile + // 使用 customUpload 实现逐个文件上传，复用项目的 httpRequest + async customUpload(file: File, insertFn: InsertFnType) { + try { + const res = await imageHttpRequest({ + file: file as any, + onProgress: () => {}, + onSuccess: () => {}, + onError: () => {} + } as any) + // 兼容前端直连上传和后端上传两种模式的返回格式 + const url = (res as any).data?.data || (res as any).data + insertFn(url, 'image', url) + } catch (error: any) { + ElMessage.error(error.msg || '图片上传失败') + console.error('Upload error:', error) } - }, - - // 上传之前触发 - onBeforeUpload(file: File) { - // console.log(file) - return file - }, - // 上传进度的回调函数 - onProgress(progress: number) { - // progress 是 0-100 的数字 - console.log('progress', progress) - }, - onSuccess(file: File, res: any) { - console.log('onSuccess', file, res) - }, - onFailed(file: File, res: any) { - alert(res.message) - console.log('onFailed', file, res) - }, - onError(file: File, err: any, res: any) { - alert(err.message) - console.error('onError', file, err, res) - }, - // 自定义插入图片 - customInsert(res: any, insertFn: InsertFnType) { - insertFn(res.data, 'image', res.data) } }, ['uploadVideo']: { - server: getUploadUrl(), // 单个文件的最大体积限制，默认为 10M maxFileSize: 1024 * 1024 * 1024, // 最多可上传几个文件，默认为 100 @@ -183,56 +150,22 @@ const editorConfig = computed((): IEditorConfig => { // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 [] allowedFileTypes: ['video/*'], - // 自定义增加 http header - headers: { - Accept: '*', - Authorization: 'Bearer ' + getRefreshToken(), // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：Editor 无法方便的刷新访问令牌 - 'tenant-id': getTenantId() - }, - - // 超时时间，默认为 30 秒 - timeout: 15 * 1000, // 15 秒 - - // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image - fieldName: 'file', - // 附加参数 - meta: { - directory: `${props.directory}-video` - }, - metaWithUrl: false, - - // uppy 配置项 - uppyConfig: { - onBeforeFileAdded: (newFile: any) => { - newFile.id = `${newFile.id}-${Date.now()}` - return newFile + // 使用 customUpload 实现逐个文件上传，复用项目的 httpRequest + async customUpload(file: File, insertFn: InsertFnType) { + try { + const res = await videoHttpRequest({ + file: file as any, + onProgress: () => {}, + onSuccess: () => {}, + onError: () => {} + } as any) + // 兼容前端直连上传和后端上传两种模式的返回格式 + const url = (res as any).data?.data || (res as any).data + insertFn(url, 'mp4', url) + } catch (error: any) { + ElMessage.error(error.msg || '视频上传失败') + console.error('Upload error:', error) } - }, - - // 上传之前触发 - onBeforeUpload(file: File) { - // console.log(file) - return file - }, - // 上传进度的回调函数 - onProgress(progress: number) { - // progress 是 0-100 的数字 - console.log('progress', progress) - }, - onSuccess(file: File, res: any) { - console.log('onSuccess', file, res) - }, - onFailed(file: File, res: any) { - alert(res.message) - console.log('onFailed', file, res) - }, - onError(file: File, err: any, res: any) { - alert(err.message) - console.error('onError', file, err, res) - }, - // 自定义插入图片 - customInsert(res: any, insertFn: InsertFnType) { - insertFn(res.data, 'mp4', res.data) } } },