设置富文本编辑器的上传配置

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;

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;
+	if(uploadFile.raw.type.includes('image')){
-	state.coverFile = file;
+		const file:any = uploadFile.raw;
-	state.coverHide = true;
+		state.coverFile = file;
-	console.log(uploadRef.value)
+		state.coverHide = true;
+	}else{
+		ElMessage.error('请上传图片文件！');
+		uploadRef.value.clearFiles();
+	}
 }
 
 onMounted(() => {