From 0a717445a99739530497e5140a8bd4e594b61690 Mon Sep 17 00:00:00 2001
From: chenhj <1263187585@qq.com>
Date: 星期六, 25 四月 2026 15:12:59 +0800
Subject: [PATCH] feat(editor): 添加富文本编辑器及图片上传功能
---
src/api/basicData/common.js | 12 ++++++
src/views/collaborativeApproval/meetingBoard/index.vue | 2 -
src/components/Editor/index.vue | 54 ++++++++++++++++----------
3 files changed, 45 insertions(+), 23 deletions(-)
diff --git a/src/api/basicData/common.js b/src/api/basicData/common.js
index 01c6f35..547c1e1 100644
--- a/src/api/basicData/common.js
+++ b/src/api/basicData/common.js
@@ -11,3 +11,15 @@
},
})
}
+
+// 閫氱敤涓婁紶鎺ュ彛锛屾敮鎸� FormData 鎵归噺浼犳枃浠�,姘镐笉杩囨湡锛屾厧鐢�
+export function uploadPublicFile(data) {
+ return request({
+ url: '/common/public/upload',
+ method: 'post',
+ data,
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ })
+}
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index c283e42..8f0eebd 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -5,11 +5,11 @@
:before-upload="handleBeforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
- name="file"
+ name="files"
:show-file-list="false"
:headers="headers"
class="editor-img-uploader"
- v-if="type == 'url'"
+ v-if="type === 'url'"
>
<i ref="uploadRef" class="editor-img-uploader"></i>
</el-upload>
@@ -27,15 +27,15 @@
</template>
<script setup>
-import axios from "axios";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { getToken } from "@/utils/auth";
+import {uploadPublicFile} from "@/api/basicData/common.js";
const { proxy } = getCurrentInstance();
const quillEditorRef = ref();
-const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/public/upload"); // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
const headers = ref({
Authorization: "Bearer " + getToken(),
});
@@ -157,21 +157,40 @@
function handleUploadSuccess(res, file) {
// 濡傛灉涓婁紶鎴愬姛
if (res.code == 200) {
+ const imageUrl = resolveImageUrl(res);
+ if (!imageUrl) {
+ proxy.$modal.msgError("鏈幏鍙栧埌鍥剧墖鍦板潃");
+ return;
+ }
// 鑾峰彇瀵屾枃鏈疄渚�
let quill = toRaw(quillEditorRef.value).getQuill();
// 鑾峰彇鍏夋爣浣嶇疆
- let length = quill.selection.savedRange.index;
+ const selection = quill.getSelection(true);
+ const length = selection ? selection.index : quill.getLength();
// 鎻掑叆鍥剧墖锛宺es.url涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囬摼鎺ュ湴鍧�
- quill.insertEmbed(
- length,
- "image",
- import.meta.env.VITE_APP_BASE_API + res.fileName
- );
+ quill.insertEmbed(length, "image", imageUrl);
// 璋冩暣鍏夋爣鍒版渶鍚�
quill.setSelection(length + 1);
} else {
proxy.$modal.msgError("鍥剧墖鎻掑叆澶辫触");
}
+}
+
+function resolveImageUrl(res) {
+ if (!res) return "";
+ // 鍏煎鏂版帴鍙�: data[0].previewURL
+ const previewURL = res?.data?.[0]?.previewURL;
+ if (previewURL) {
+ return previewURL;
+ }
+ // 鍏煎鏃ф帴鍙�
+ if (res.url) {
+ return res.url;
+ }
+ if (res.fileName) {
+ return `${import.meta.env.VITE_APP_BASE_API}${res.fileName}`;
+ }
+ return "";
}
// 涓婁紶澶辫触澶勭悊
@@ -196,17 +215,10 @@
function insertImage(file) {
const formData = new FormData();
- formData.append("file", file);
- axios
- .post(uploadUrl.value, formData, {
- headers: {
- "Content-Type": "multipart/form-data",
- Authorization: headers.value.Authorization,
- },
- })
- .then((res) => {
- handleUploadSuccess(res.data);
- });
+ formData.append("files", file);
+ uploadPublicFile(formData).then((res) => {
+ handleUploadSuccess(res)
+ })
}
</script>
diff --git a/src/views/collaborativeApproval/meetingBoard/index.vue b/src/views/collaborativeApproval/meetingBoard/index.vue
index dfbb922..ebedd1f 100644
--- a/src/views/collaborativeApproval/meetingBoard/index.vue
+++ b/src/views/collaborativeApproval/meetingBoard/index.vue
@@ -83,9 +83,7 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
import { Clock, Location, User, UserFilled } from '@element-plus/icons-vue'
-import Editor from "@/components/Editor/index.vue";
import {getMeetSummaryItems,getMeetSummary} from '@/api/collaborativeApproval/meeting.js'
import dayjs from "dayjs";
--
Gitblit v1.9.3