From 48d3683266725b4059eb59c5e0957495d1d586cb Mon Sep 17 00:00:00 2001
From: Double-_-Z <2492419643@qq.com>
Date: Fri, 1 Nov 2024 01:10:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E7=9A=84=E4=B8=8A=E4=BC=A0=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/editor/index.vue        | 46 ++++++++++++++++++++++++++
 src/views/article/component/upload.vue | 12 ++++---
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/components/editor/index.vue b/src/components/editor/index.vue
index c5fed8a..4ded471 100644
--- a/src/components/editor/index.vue
+++ b/src/components/editor/index.vue
@@ -18,6 +18,8 @@ import '@wangeditor/editor/dist/css/style.css';
 import { reactive, shallowRef, watch, onBeforeUnmount } from 'vue';
 import { IDomEditor } from '@wangeditor/editor';
 import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
+import { articleApi } from '/@/api/article';
+import { ElMessage } from 'element-plus';
 
 // 定义父组件传过来的值
 const props = defineProps({
@@ -56,10 +58,54 @@ const editorRef = shallowRef();
 const state = reactive({
 	editorConfig: {
 		placeholder: props.placeholder,
+		MENU_CONF:{}
 	},
 	editorVal: props.getHtml,
 });
 
+// 引入 api 请求接口
+const artApi = articleApi();
+
+// 自定义插入图片、视频方法类型
+type InsertImgFnType = (url: string, alt: string, href: string) => void;
+
+type InsertVideoFnType = (url: string, poster: string) => void
+
+// 基本路径
+const viteUrl = import.meta.env.VITE_API_URL;
+
+// 图片上传配置
+state.editorConfig.MENU_CONF['uploadImage'] = {
+    // 自定义插入图片
+    async customUpload(file: File, insertFn: InsertImgFnType) { 
+		const formdata = new FormData();
+		formdata.append('file', file);
+		if(file.type.includes('image')){
+			let res = await artApi.uploadFile(formdata);
+			if(res?.success) insertFn(encodeURI(viteUrl+res.data.path), res.data.title, '#')
+			else ElMessage.error('图片上传失败！');
+		}else{
+			ElMessage.error('上传图片格式错误！');
+		}
+    },
+};
+
+// 视频上传配置
+state.editorConfig.MENU_CONF['uploadVideo'] = {
+    // 自定义插入图片
+    async customUpload(file: File, insertFn: InsertVideoFnType) { 
+		const formdata = new FormData();
+		formdata.append('file', file);
+		if(file.type.includes('video')){
+			let res = await artApi.uploadFile(formdata);
+			if(res?.success) insertFn(encodeURI(viteUrl+res.data.path), '')
+			else ElMessage.error('视频上传失败！');
+		}else{
+			ElMessage.error('上传视频格式错误！');
+		}
+    },
+}
+
 // 编辑器回调函数
 const handleCreated = (editor: IDomEditor) => {
 	editorRef.value = editor;
diff --git a/src/views/article/component/upload.vue b/src/views/article/component/upload.vue
index fb9475f..701b015 100644
--- a/src/views/article/component/upload.vue
+++ b/src/views/article/component/upload.vue
@@ -306,10 +306,14 @@ const handleDownload = (file: UploadFile) => {
 
 // 封面图片更改
 const handleUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
-	const file:any = uploadFile.raw;
-	state.coverFile = file;
-	state.coverHide = true;
-	console.log(uploadRef.value)
+	if(uploadFile.raw.type.includes('image')){
+		const file:any = uploadFile.raw;
+		state.coverFile = file;
+		state.coverHide = true;
+	}else{
+		ElMessage.error('请上传图片文件！');
+		uploadRef.value.clearFiles();
+	}
 }
 
 onMounted(() => {