From f37af6f48c9c0165c62a221ae1509add66393991 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=96=AF=E7=8B=82=E7=9A=84=E7=8B=AE=E5=AD=90Li?=
 <15040126243@163.com>
Date: Thu, 9 Apr 2026 11:32:57 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=B0=86=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E9=87=8D=E6=96=B0=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?oss=E5=AD=98=E5=82=A8(=E5=A4=A7=E5=AE=B6=E8=BF=98=E6=98=AF?=
 =?UTF-8?q?=E5=B8=8C=E6=9C=9B=E7=94=A8oss)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Editor/index.vue | 75 +++++++++++++++------------------
 1 file changed, 34 insertions(+), 41 deletions(-)

diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index f21ef2e..67394aa 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -1,13 +1,15 @@
 <template>
   <div>
     <el-upload
-      v-if="type"
-      action=""
+      v-if="type === 'url'"
+      :action="upload.url"
       :before-upload="handleBeforeUpload"
-      :http-request="handleUploadRequest"
+      :on-success="handleUploadSuccess"
+      :on-error="handleUploadError"
       class="editor-img-uploader"
       name="file"
       :show-file-list="false"
+      :headers="upload.headers"
     >
       <i ref="uploadRef"></i>
     </el-upload>
@@ -29,7 +31,7 @@ import '@vueup/vue-quill/dist/vue-quill.snow.css';
 
 import { QuillEditor, Quill } from '@vueup/vue-quill';
 import { propTypes } from '@/utils/propTypes';
-import type { UploadRequestHandler, UploadRequestOptions } from 'element-plus';
+import { globalHeaders } from '@/utils/request';
 
 defineEmits(['update:modelValue']);
 
@@ -45,11 +47,15 @@ const props = defineProps({
   /* 上传文件大小限制(MB) */
   fileSize: propTypes.number.def(5),
   /* 类型（base64格式、url格式） */
-  type: propTypes.string.def('base64')
+  type: propTypes.string.def('url')
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
+const upload = reactive<UploadOption>({
+  headers: globalHeaders(),
+  url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
+});
 const quillEditorRef = ref();
 const uploadRef = ref<HTMLDivElement>();
 
@@ -110,9 +116,28 @@ watch(
   { immediate: true }
 );
 
+// 图片上传成功返回图片地址
+const handleUploadSuccess = (res: any) => {
+  // 如果上传成功
+  if (res.code === 200) {
+    // 获取富文本实例
+    const quill = toRaw(quillEditorRef.value).getQuill();
+    // 获取光标位置
+    const length = quill.selection.savedRange.index;
+    // 插入图片，res为服务器返回的图片链接地址
+    quill.insertEmbed(length, 'image', res.data.url);
+    // 调整光标到最后
+    quill.setSelection(length + 1);
+    proxy?.$modal.closeLoading();
+  } else {
+    proxy?.$modal.msgError('图片插入失败');
+    proxy?.$modal.closeLoading();
+  }
+};
+
 // 图片上传前拦截
 const handleBeforeUpload = (file: any) => {
-  const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg', 'image/svg+xml'];
+  const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg'];
   const isJPG = type.includes(file.type);
   //检验文件格式
   if (!isJPG) {
@@ -131,41 +156,9 @@ const handleBeforeUpload = (file: any) => {
   return true;
 };
 
-// base64 模式插入图片
-const handleUploadRequest: UploadRequestHandler = (options: UploadRequestOptions) => {
-  return new Promise<void>((resolve, reject) => {
-    const file = options.file as File;
-    const quill = toRaw(quillEditorRef.value)?.getQuill();
-    if (!quill) {
-      proxy?.$modal.msgError('编辑器未就绪');
-      proxy?.$modal.closeLoading();
-      reject(new Error('editor not ready'));
-      return;
-    }
-    const reader = new FileReader();
-    reader.onload = () => {
-      const base64 = reader.result as string;
-      const range = quill.selection?.savedRange;
-      const length = range ? range.index : quill.getLength();
-      quill.insertEmbed(length, 'image', base64);
-      quill.setSelection(length + 1);
-      proxy?.$modal.closeLoading();
-      options.onSuccess?.({ url: base64 });
-      resolve();
-    };
-    reader.onerror = () => {
-      proxy?.$modal.msgError('图片插入失败');
-      proxy?.$modal.closeLoading();
-      const err = Object.assign(new Error('read image failed'), {
-        status: 0,
-        method: 'POST',
-        url: options.action || ''
-      });
-      options.onError?.(err as any);
-      reject(err);
-    };
-    reader.readAsDataURL(file);
-  });
+// 图片失败拦截
+const handleUploadError = (err: any) => {
+  proxy?.$modal.msgError('上传文件失败');
 };
 </script>