富文本中图片上传到oss

src/api/sys/fileService.js

@@ -36,4 +36,12 @@ export default {
 			params: params,
 		});
 	},
+	ossUploadFile: function (formData, config = {}) {
+		return request({
+			url: "/public-modules-server/oss/file/webUpload/upload",
+			method: "post",
+			data: formData,
+			config: config,
+		});
+	}
 };

src/components/editor/WangEditor.vue

@@ -1,140 +1,123 @@
 <template>
-  <div class="editor" style="min-width:700px; padding-right:10px">
-    <div ref="toolbar" class="toolbar">
-    </div>
-    <div ref="editor" class="wtext">
-    </div>
-  </div>
+	<div style="border: 1px solid #ccc">
+		<Toolbar
+			style="border-bottom: 1px solid #ccc"
+			:editor="editorRef"
+			:defaultConfig="toolbarConfig"
+			:mode="mode"
+		/>
+		<Editor
+			style="height: 500px; overflow-y: hidden"
+			v-model="valueHtml"
+			:defaultConfig="editorConfig"
+			:mode="mode"
+			@onCreated="handleCreated"
+		/>
+	</div>
 </template>
 
 <script>
-// import E from '@wangeditor/editor-for-vue'
-export default {
-  name: 'WangEditor',
-  data () {
-    return {
-      editor: null,
-      info_: null
-    }
-  },
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    isClear: {
-      type: Boolean,
-      default: false
-    },
-    index: {
-      type: Number,
-      default: 0
-    }
-  },
-	component: {
-  	// E
-	},
-  watch: {
-    isClear (val) {
-      // 触发清除文本域内容
-      // if (val) {
-      //   this.editor.txt.clear()
-      //   this.info_ = null
-      // }
-    }
-  },
-  mounted () {
-    // this.seteditor()
-  },
-  methods: {
-    clear () {
-      // this.editor.txt.clear()
-    },
-    init (val) {
-      // 使用 v-model 时，设置初始值
-      // this.editor.txt.html(val)
-    },
-    seteditor () {
-      // this.editor = new E(this.$refs.toolbar, this.$refs.editor)
-      // this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
-      // // eslint-disable-next-line no-template-curly-in-string
-      // this.editor.customConfig.uploadImgServer = `${this.$http.BASE_URL}/oss/file/webUpload/upload`// 配置服务器端地址
-      // this.editor.customConfig.uploadImgHeaders = { }// 自定义 header
-      // this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
-      // this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
-      // this.editor.customConfig.uploadImgMaxLength = 1 // 限制一次最多上传 3 张图片
-      // this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
-      // this.editor.customConfig.menus = [
-      //   'head', // 标题
-      //   'bold', // 粗体
-      //   'fontSize', // 字号
-      //   'fontName', // 字体
-      //   'italic', // 斜体
-      //   'underline', // 下划线
-      //   'strikeThrough', // 删除线
-      //   'foreColor', // 文字颜色
-      //   'backColor', // 背景颜色
-      //   'link', // 插入链接
-      //   'list', // 列表
-      //   'justify', // 对齐方式
-      //   'quote', // 引用
-      //   'emoticon', // 表情
-      //   'image', // 插入图片
-      //   'table', // 表格
-      //   'video', // 插入视频
-      //   'code', // 插入代码
-      //   'undo', // 撤销
-      //   'redo' // 重复
-      // ]
-      // this.editor.customConfig.uploadImgHooks = {
-      //   fail: (xhr, editor, result) => {
-      //     // 插入图片失败回调
-      //   },
-      //   success: (xhr, editor, result) => {
-      //     // 图片上传成功回调
-      //     // editor.txt.append('<img style="max-width: 650px" src=' + result.lsUrl + '></img>')
-      //     editor.uploadImg.insertLinkImg(result.lsUrl)
-      //     this.$emit('getUrl', result.url, result.lsUrl, this.index)
-      //   },
-      //   timeout: (xhr, editor) => {
-      //     // 网络超时的回调
-      //   },
-      //   error: (xhr, editor) => {
-      //     // 图片上传错误的回调
-      //   },
-      //   customInsert: (insertImg, result, editor) => {
-      //     // 图片上传成功，插入图片的回调
-      //   }
-      // }
-      // this.editor.customConfig.onchange = (html) => {
-      //   this.info_ = html // 绑定当前逐渐地值
-      //   this.$emit('change', this.info_) // 将内容同步到父组件中
-      // }
-      // // 创建富文本编辑器
-      // this.editor.create()
-    },
-    disable () {
-      // 禁用编辑功能
-      // this.editor.$textElem.attr('contenteditable', false)
-    },
-    enable () {
-      // 开启编辑功能
-      // this.editor.$textElem.attr('contenteditable', true)
-    }
-  }
-}
-</script>
+	import "@wangeditor/editor/dist/css/style.css"; // 引入 css
+
+	import { onBeforeUnmount, ref, shallowRef, watch } from "vue";
+	import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+	import config from "@/config/upload";
+	import { ElMessage } from "element-plus";
+	import { ElLoading } from "element-plus";
+
+	export default {
+		components: { Editor, Toolbar },
+		props: {
+			modelValue: {
+				type: String,
+				default: "",
+			},
+			index: {
+				type: Number,
+				default: 0
+			}
+		},
+		setup(props, { emit }) {
+			// 编辑器实例，必须用 shallowRef
+			const editorRef = shallowRef();
+
+			// 内容 HTML
+			const valueHtml = ref("");
+
+			const toolbarConfig = {
+			};
+			const editorConfig = { placeholder: "请输入内容..." };
+
+			editorConfig.MENU_CONF = {
+				// 上传图片的配置
+			};
 
-<style lang="css">
-.editor {
-  width: 100%;
-  margin: 0 auto;
-}
-.toolbar {
-  border: 1px solid #ccc;
-}
-.wtext {
-  border: 1px solid #ccc;
-  height: 500px;
-}
-</style>
+			editorConfig.MENU_CONF.uploadImage = {
+				maxFileSize: 2 * 1024 * 1024, // 2M
+				// base64LimitSize: 1024 * 1024, // 1M 以下插入 base64
+				customUpload(file, insertFn) {
+					const maxSize = file.size / 1024 / 1024 < config.maxSize;
+					if (!maxSize) {
+						ElMessage({
+							message: `上传文件大小不能超过 ${config.maxSize}MB!`,
+							type: "warning",
+						});
+						return false;
+					}
+					const obj = new FormData();
+					obj.append("file", file);
+					var apiObj = config.apiObj;
+					const loading = ElLoading.service({
+						lock: true,
+						text: "图片上传中...",
+						background: "rgba(0, 0, 0, 0.7)",
+					});
+					apiObj
+						.ossUploadFile(obj)
+						.then((res) => {
+							console.log(res)
+							insertFn(res.lsUrl, "", res.lsUrl);
+							emit('getUrl', res.url, res.lsUrl, props.index)
+							// 以服务的方式调用的 Loading 需要异步关闭
+							loading.close();
+						})
+						.catch((err) => {
+							// 以服务的方式调用的 Loading 需要异步关闭
+							loading.close();
+							console.log(err);
+						});
+				},
+			};
+
+			// 组件销毁时，也及时销毁编辑器
+			onBeforeUnmount(() => {
+				const editor = editorRef.value;
+				if (editor == null) return;
+				editor.destroy();
+			});
+
+			watch(valueHtml, (newValue) => {
+				emit("update:modelValue", newValue);
+			});
+			watch(
+				() => props.modelValue,
+				(newValue) => {
+					valueHtml.value = newValue;
+				}
+			);
+
+			const handleCreated = (editor) => {
+				editorRef.value = editor; // 记录 editor 实例，重要！
+			};
+
+			return {
+				editorRef,
+				valueHtml,
+				mode: "default", // 或 'simple'
+				toolbarConfig,
+				editorConfig,
+				handleCreated,
+			};
+		},
+	};
+</script>