feat: 🚀 批量图片排序

src/api/index.ts

@@ -71,16 +71,25 @@ class RequestHttp {
          */
         this.service.interceptors.response.use(
             (response: AxiosResponse) => {
-                const { data } = response;
+                const { data, request } = response;
+
                 tryHideFullScreenLoading();
+                const imgId = request?.responseURL?.split("imgId=")[1];
                 //获取导出表格名称
                 getDispositionName(response);
                 // 获取响应头中的 Authorization 信息
                 const authorization = response.headers["authorization"];
+                if (imgId) {
+                    return {
+                        imgId,
+                        data
+                    };
+                }
                 if (authorization) {
                     // 可以在这里更新用户的 token 信息
                     const userStore = useUserStore();
                     userStore.setToken(authorization);
+                    console.log("123232323");
                     return data;
                 }
 

src/api/modules/upload.ts

@@ -11,8 +11,8 @@ import http from "@/api";
  * @name 文件上传模块
  */
 // 图片上传
-export const uploadImg = (params: any, name?: any) => {
+export const uploadImg = (params: any, name?: any, id?: any) => {
-    return http.post<any>(`/images/${name}/upload`, params);
+    return http.post<any>(`/images/${name}/upload?imgId=${id}`, params);
 };
 
 // 视频上传

src/components.d.ts

@@ -5,62 +5,62 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module "vue" {
+declare module 'vue' {
   export interface GlobalComponents {
-        ElAside: typeof import("element-plus/es")["ElAside"];
+    ElAside: typeof import('element-plus/es')['ElAside']
-        ElAutocomplete: typeof import("element-plus/es")["ElAutocomplete"];
+    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
-        ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
-        ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
-        ElButton: typeof import("element-plus/es")["ElButton"];
+    ElButton: typeof import('element-plus/es')['ElButton']
-        ElCarousel: typeof import("element-plus/es")["ElCarousel"];
+    ElCarousel: typeof import("element-plus/es")["ElCarousel"]
-        ElCarouselItem: typeof import("element-plus/es")["ElCarouselItem"];
+    ElCarouselItem: typeof import("element-plus/es")["ElCarouselItem"]
-        ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-        ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
-        ElColorPicker: typeof import("element-plus/es")["ElColorPicker"];
+    ElColorPicker: typeof import("element-plus/es")["ElColorPicker"]
-        ElContainer: typeof import("element-plus/es")["ElContainer"];
+    ElContainer: typeof import('element-plus/es')['ElContainer']
-        ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-        ElDialog: typeof import("element-plus/es")["ElDialog"];
+    ElDialog: typeof import('element-plus/es')['ElDialog']
-        ElDivider: typeof import("element-plus/es")["ElDivider"];
+    ElDivider: typeof import('element-plus/es')['ElDivider']
-        ElDrawer: typeof import("element-plus/es")["ElDrawer"];
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
-        ElDropdown: typeof import("element-plus/es")["ElDropdown"];
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-        ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"];
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-        ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-        ElForm: typeof import("element-plus/es")["ElForm"];
+    ElForm: typeof import('element-plus/es')['ElForm']
-        ElFormItem: typeof import("element-plus/es")["ElFormItem"];
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-        ElHeader: typeof import("element-plus/es")["ElHeader"];
+    ElHeader: typeof import('element-plus/es')['ElHeader']
-        ElIcon: typeof import("element-plus/es")["ElIcon"];
+    ElIcon: typeof import('element-plus/es')['ElIcon']
-        ElImage: typeof import("element-plus/es")["ElImage"];
+    ElImage: typeof import('element-plus/es')['ElImage']
-        ElInput: typeof import("element-plus/es")["ElInput"];
+    ElInput: typeof import('element-plus/es')['ElInput']
-        ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-        ElMain: typeof import("element-plus/es")["ElMain"];
+    ElMain: typeof import('element-plus/es')['ElMain']
-        ElMenu: typeof import("element-plus/es")["ElMenu"];
+    ElMenu: typeof import('element-plus/es')['ElMenu']
-        ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-        ElOption: typeof import("element-plus/es")["ElOption"];
+    ElOption: typeof import('element-plus/es')['ElOption']
-        ElPagination: typeof import("element-plus/es")["ElPagination"];
+    ElPagination: typeof import('element-plus/es')['ElPagination']
-        ElRadio: typeof import("element-plus/es")["ElRadio"];
+    ElRadio: typeof import('element-plus/es')['ElRadio']
-        ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
+    ElRadioButton: typeof import("element-plus/es")["ElRadioButton"]
-        ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-        ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-        ElSelect: typeof import("element-plus/es")["ElSelect"];
+    ElSelect: typeof import('element-plus/es')['ElSelect']
-        ElSubMenu: typeof import("element-plus/es")["ElSubMenu"];
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-        ElSwitch: typeof import("element-plus/es")["ElSwitch"];
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
-        ElTable: typeof import("element-plus/es")["ElTable"];
+    ElTable: typeof import('element-plus/es')['ElTable']
-        ElTableColumn: typeof import("element-plus/es")["ElTableColumn"];
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-        ElTabPane: typeof import("element-plus/es")["ElTabPane"];
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-        ElTabs: typeof import("element-plus/es")["ElTabs"];
+    ElTabs: typeof import('element-plus/es')['ElTabs']
-        ElTag: typeof import("element-plus/es")["ElTag"];
+    ElTag: typeof import('element-plus/es')['ElTag']
-        ElTooltip: typeof import("element-plus/es")["ElTooltip"];
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-        ElTree: typeof import("element-plus/es")["ElTree"];
+    ElTree: typeof import("element-plus/es")["ElTree"]
-        ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
-        ElUpload: typeof import("element-plus/es")["ElUpload"];
+    ElUpload: typeof import('element-plus/es')['ElUpload']
-        IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];
+    IEpArrowDown: typeof import('~icons/ep/arrow-down')['default']
-        IEpCircleClose: typeof import("~icons/ep/circle-close")["default"];
+    IEpCircleClose: typeof import('~icons/ep/circle-close')['default']
-        IEpFolderDelete: typeof import("~icons/ep/folder-delete")["default"];
+    IEpFolderDelete: typeof import('~icons/ep/folder-delete')['default']
-        IEpFullScreen: typeof import("~icons/ep/full-screen")["default"];
+    IEpFullScreen: typeof import('~icons/ep/full-screen')['default']
-        IEpRemove: typeof import("~icons/ep/remove")["default"];
+    IEpRemove: typeof import('~icons/ep/remove')['default']
-        IEpSearch: typeof import("~icons/ep/search")["default"];
+    IEpSearch: typeof import('~icons/ep/search')['default']
-        IEpSwitchButton: typeof import("~icons/ep/switch-button")["default"];
+    IEpSwitchButton: typeof import('~icons/ep/switch-button')['default']
-        RouterLink: typeof import("vue-router")["RouterLink"];
+    RouterLink: typeof import('vue-router')['RouterLink']
-        RouterView: typeof import("vue-router")["RouterView"];
+    RouterView: typeof import('vue-router')['RouterView']
   }
 }

src/components/Editor/index.vue

@@ -4,14 +4,15 @@
         action="#"
         :multiple="true"
         :show-file-list="false"
-        :http-request="() => {}"
+        :http-request="handleHttpUpload"
-        :before-upload="() => false"
+        :before-upload="handleBeforeUpload"
-        @change="handleFileChange"
         class="editor-img-uploader"
         accept=".jpeg,.jpg,.png,.gif"
     >
         <i ref="uploadRef" class="Plus editor-img-uploader"></i>
     </el-upload>
+
+    <!-- 使用input 标签劫持原本视频上传事件，实现视频上传 -->
     <input
         type="file"
         accept="video/*"
@@ -42,219 +43,330 @@ import { h } from "@/utils/url";
 import { routerObj } from "./utils.js";
 import { titleConfig } from "./titleConfig.js";
 import { uploadVideo, uploadImg } from "@/api/modules/upload";
-
+//uploadImg
 // 字体配置
 let fontSizeStyle = Quill.import("attributors/style/size");
 fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
 Quill.register(fontSizeStyle, true);
 
-// 自定义模块
+// 引入插入图片标签自定义的类
 import ImageBlot from "./quill-image";
 import Video from "./quill-video";
+const uuid = ref("id-" + generateUUID());
+const $router = useRouter();
+const routerValueName = $router.currentRoute.value.name;
+
+const routerName = ref(routerObj[routerValueName]);
+
 Quill.register(Video);
 Quill.register(ImageBlot);
 
-// 路由相关
-const $router = useRouter();
-const routerValueName = $router.currentRoute.value.name;
-const routerName = ref(routerObj[routerValueName]);
-
-// 核心：上传队列 + 临时去重集合（单次上传会话有效）
-const uploadQueue = ref([]);
-const isProcessing = ref(false);
-const uuid = ref(generateUUID());
-// 临时去重集合：仅在当前批次上传中去重，全部完成后清空
-const tempProcessedFiles = ref(new Set());
-
-// 编辑器基础
 const { proxy } = getCurrentInstance();
 const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
 const uploadFileVideo = ref(null);
-const myQuillEditor = ref(null);
+const imageList = ref([]);
-const oldContent = ref("");
+const imageListDb = ref([]);
-
-// Props
 const props = defineProps({
-    content: { type: String, default: "" },
+    /* 编辑器的内容 */
-    readOnly: { type: Boolean, default: false },
+    content: {
-    fileSizeLimit: { type: Number, default: 10 }
+        type: String,
+        default: ""
+    },
+    /* 只读 */
+    readOnly: {
+        type: Boolean,
+        default: false
+    },
+    // 上传文件大小限制(MB)
+    fileSizeLimit: {
+        type: Number,
+        default: 10
+    }
 });
-
+//值
-// 内容双向绑定
 const editorContent = computed({
     get: () => props.content,
-    set: val => emit("update:content", val)
+    set: val => {
+        emit("update:content", val);
+    }
 });
-
+//富文本ref
-// 编辑器配置
+const myQuillEditor = ref(null);
+//富文本值
+const oldContent = ref("");
+//富文本配置项
 const options = reactive({
     theme: "snow",
+    debug: "warn",
     modules: {
+        // 工具栏配置
         toolbar: {
             container: [
-                ["bold", "italic", "underline", "strike"],
+                ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
-                ["blockquote", "code-block"],
+                ["blockquote", "code-block"], // 引用  代码块
-                [{ list: "ordered" }, { list: "bullet" }],
+                [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
-                [{ indent: "-1" }, { indent: "+1" }],
+                [{ indent: "-1" }, { indent: "+1" }], // 缩进
-                [{ size: fontSizeStyle.whitelist }],
+                [{ size: ["small", false, "large", "huge"] }], // 字体大小
-                [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-                [{ color: [] }, { background: [] }],
+                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-                [{ align: [] }],
+                [{ align: [] }], // 对齐方式
-                ["clean"],
+                ["clean"], // 清除文本格式
-                ["link", "image", "video"]
+                ["link", "image", "video"] // 链接、图片、视频
             ],
             handlers: {
-                image: () => proxy.$refs.uploadRef.click(),
+                // 重写图片上传事件
-                video: () => document.querySelector("#uploadFileVideo")?.click()
+                image: function (value) {
+                    if (value) {
+                        //调用图片上传
+                        proxy.$refs.uploadRef.click();
+                    } else {
+                        Quill.format("image", true);
+                    }
+                },
+                video: function (value) {
+                    if (value) {
+                        // 劫持原来的视频点击按钮事件
+                        document.querySelector("#uploadFileVideo")?.click();
+                    } else {
+                        Quill.format("video", true);
+                    }
+                }
             }
         }
     },
     placeholder: "请输入内容...",
-    readOnly: props.readOnly
+    readOnly: props.readOnly,
+    clipboard: {
+        matchers: [
+            [
+                "img",
+                (node, delta) => {
+                    const src = node.getAttribute("src");
+                    const id = node.getAttribute("id");
+                    delta.insert({ image: { src, id: id } });
+                }
+            ]
+        ]
+    }
 });
 
-// 处理文件选择（临时去重，仅当前批次有效）
+// 上传前的钩子
-const handleFileChange = (file, fileList) => {
+const handleBeforeUpload = file => {
-    if (!fileList.length) return;
+    const fileType = file.type;
+    console.log(file, "====file====");
 
-    const rawEditor = toRaw(myQuillEditor.value);
+    // 为文件添加唯一标识
-    const quill = rawEditor?.getQuill();
+    file.customUid = generateUUID(); // 确保有唯一ID
-    if (!quill) return;
+    imageListDb.value.push(file);
 
-    // 获取初始光标位置
+    // 图片和视频格式校验
-    let baseCursorIndex = quill.selection.savedRange?.index || 0;
+    const validTypes = [
+        "image/jpeg",
+        "image/png",
+        "image/gif",
+        "image/jpg",
+        "image/bmp",
+        "image/webp",
+        "video/mov",
+        "video/ts",
+        "video/mp4",
+        "video/avi"
+    ];
 
-    // 生成文件唯一标识（用于临时去重）
+    if (validTypes.includes(fileType)) {
-    const getFileKey = file => `${file.name}-${file.size}-${file.lastModified}`;
+        // 校检文件大小
-
+        const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
-    // 过滤当前批次中已选择的重复文件（但允许和历史批次重复）
+        if (!isLt) {
-    const newFiles = fileList.filter(item => {
+            console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
-        const file = item.raw;
+            alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
-        const key = getFileKey(file);
-        // 仅在当前批次内去重（避免单次选择中重复添加）
-        if (tempProcessedFiles.value.has(key)) {
-            console.log(`当前批次中已包含文件: ${file.name}`);
             return false;
         }
-        // 校验文件合法性
-        if (!validateFile(file)) return false;
-        // 添加到临时去重集合
-        tempProcessedFiles.value.add(key);
         return true;
+    } else {
+        alert(`文件格式不正确！`);
+        return false;
+    }
+};
+
+// 图片上传
+const handleHttpUpload = async options => {
+    console.log(imageListDb.value.length, "==============length============");
+    let formData = new FormData();
+    formData.append("image", options.file);
+    imageList.value.push(options.file);
+
+    try {
+        const result = await uploadImg(formData, routerName.value, options.file.customUid);
+
+        // 假设服务器返回格式为 { imgId: 'xxx', data: { code: 0, data: { path: 'xxx' } } }
+        const { imgId } = result;
+        console.log(imgId, "==========imgId from server");
+
+        if (result?.data?.code === 0) {
+            const { data } = result?.data;
+
+            // 1. 通过customUid查找对应的文件对象
+            const fileItem = imageListDb.value.find(item => item.customUid === options.file.customUid);
+            if (fileItem) {
+                fileItem.serverImgId = imgId; // 保存服务器返回的imgId
+                fileItem.path = data.path; // 保存图片路径
+                console.log(`成功为文件 ${fileItem.name} 设置路径: ${data.path}`);
+            } else {
+                console.error(`找不到对应的文件对象，customUid: ${options.file.customUid}`);
+            }
+
+            // 2. 检查是否所有文件都已上传完成
+            const allFilesUploaded = imageListDb.value.every(item => item.path);
+            if (allFilesUploaded) {
+                console.log("所有文件上传完成，准备插入到富文本编辑器");
+
+                // 获取富文本实例
+                const rawMyQuillEditor = toRaw(myQuillEditor.value);
+                const quill = rawMyQuillEditor.getQuill();
+
+                // 按上传顺序插入图片
+                imageListDb.value.forEach((item, index) => {
+                    // 获取光标位置（每次插入后光标会移动）
+                    const length = quill.getLength() - 1; // 文本末尾
+                    console.log(length, "=插入位置=");
+
+                    quill.insertEmbed(length, "image", {
+                        url: h + item.path,
+                        id: item.serverImgId || generateUUID()
                     });
 
-    if (!newFiles.length) {
+                    // 移动光标到插入后的位置
-        alert("所选文件已在当前上传批次中或不合法");
+                    quill.setSelection(length + 1);
+
+                    console.log(`已插入图片 ${index + 1}/${imageListDb.value.length}: ${item.name}`);
+                });
+
+                // 清空临时数组
+                imageList.value = [];
+                imageListDb.value = [];
+                console.log("所有图片已插入富文本，数组已清空");
+            }
+        }
+    } catch (error) {
+        console.error("图片上传失败:", error);
+    }
+};
+
+// //上传前的钩子
+// const handleBeforeUpload = file => {
+//     const fileType = file.type;
+//     console.log(file, "====file====");
+//     imageListDb.value.push(file);
+//     // 图片
+//     if (
+//         fileType == "image/jpeg" ||
+//         fileType == "image/png" ||
+//         fileType == "image/gif" ||
+//         fileType == "image/jpg" ||
+//         fileType == "image/bmp" ||
+//         fileType == "image/webp" ||
+//         fileType == "video/mov" ||
+//         fileType == "video/ts" ||
+//         fileType == "video/mp4" ||
+//         fileType == "video/avi"
+//     ) {
+//         const fileSizeLimit = file.size;
+//         // 校检文件大小
+//         const isLt = fileSizeLimit / 1024 / 1024 < props.fileSizeLimit;
+//         if (!isLt) {
+//             console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
+//             alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
+//             return false;
+//         } else {
+//             console.log(`RIch MB!`);
+//             return true;
+//         }
+//     } else {
+//         alert(`文件格式不正确！`);
+//         return false;
+//     }
+// };
+// //图片上传
+// const handleHttpUpload = async options => {
+//     console.log(imageListDb.value.length, "==============length============");
+//     let formData = new FormData();
+//     //这里要根据后端设置的name设置key值,如果name是file就传file是image就传image
+//     formData.append("image", options.file);
+//     imageList.value.push(options.file);
+//     try {
+//         const result = await uploadImg(formData, routerName.value, options.file.uid);
+//         const { imgId } = result;
+//         console.log(imgId, "==========sdsdsd");
+//         if (result?.data?.code === 0) {
+//             const { data } = result?.data;
+//             //获取到imgId,将data.path匹配
+//             let iLength = imageListDb.value.length;
+//             for (let i = 0; i < iLength; i++) {
+//                 let item = imageListDb.value[i];
+//                 if (item.uid == imgId) {
+//                     item.path = data.path;
+//                 }
+//             }
+//             if (imageList.value.length === imageListDb.value.length) {
+//                 console.log("走进来了");
+//                 let tLength = imageListDb.value.length;
+//                 for (let j = 0; j < tLength; j++) {
+//                     let rawMyQuillEditor = toRaw(myQuillEditor.value);
+//                     // 获取富文本实例
+//                     let quill = rawMyQuillEditor.getQuill();
+//                     // 获取光标位置
+//                     let length = quill.selection.savedRange.index;
+//                     console.log(length, "=光标length=");
+//                     quill.insertEmbed(length, "image", {
+//                         url: h + imageListDb.value[j].path,
+//                         id: generateUUID()
+//                     });
+//                     quill.setSelection(length + 1);
+//                     if (j === tLength - 1) {
+//                         imageList.value = [];
+//                         imageListDb.value = [];
+//                     }
+//                 }
+//             }
+//         }
+//     } catch (error) {}
+// };
+
+//视频上传
+const handleVideoUpload = async evt => {
+    if (evt.target.files.length === 0) {
         return;
     }
-
-    // 按选择顺序添加到队列
-    newFiles.forEach((item, index) => {
-        uploadQueue.value.push({
-            file: item.raw,
-            cursorIndex: baseCursorIndex + index
-        });
-    });
-
-    // 启动队列处理
-    if (!isProcessing.value) {
-        processQueue();
-    }
-};
-
-// 文件校验
-const validateFile = file => {
-    const isImage = file.type.startsWith("image/");
-    if (!isImage) {
-        alert("请上传图片文件");
-        return false;
-    }
-
-    const fileSizeMB = file.size / 1024 / 1024;
-    if (fileSizeMB > props.fileSizeLimit) {
-        alert(`文件 ${file.name} 大小超过 ${props.fileSizeLimit} MB`);
-        return false;
-    }
-
-    return true;
-};
-
-// 处理上传队列（全部完成后清空临时去重集合）
-const processQueue = async () => {
-    if (isProcessing.value || uploadQueue.value.length === 0) return;
-
-    isProcessing.value = true;
-    const { file, cursorIndex } = uploadQueue.value[0];
-
-    try {
-        // 上传文件
     const formData = new FormData();
-        formData.append("image", file);
+    formData.append("video", evt.target.files[0]);
-        const result = await uploadImg(formData, routerName.value);
-
-        if (result?.code === 0) {
-            const rawEditor = toRaw(myQuillEditor.value);
-            const quill = rawEditor.getQuill();
-            // 插入图片
-            quill.insertEmbed(cursorIndex, "image", {
-                url: h + result.data.path,
-                id: generateUUID()
-            });
-            quill.setSelection(cursorIndex + 1);
-        }
-    } catch (error) {
-        console.error(`文件 ${file.name} 上传失败:`, error);
-    } finally {
-        uploadQueue.value.shift();
-        // 若队列已空，清空临时去重集合（允许下次上传相同文件）
-        if (uploadQueue.value.length === 0) {
-            tempProcessedFiles.value.clear();
-        }
-        isProcessing.value = false;
-        // 继续处理下一个
-        processQueue();
-    }
-};
-
-// 视频上传（保持不变）
-const handleVideoUpload = async evt => {
-    if (evt.target.files.length === 0) return;
-
-    const file = evt.target.files[0];
-    const formData = new FormData();
-    formData.append("video", file);
-
     try {
-        const rawEditor = toRaw(myQuillEditor.value);
+        let quill = toRaw(myQuillEditor.value).getQuill();
-        const quill = rawEditor.getQuill();
+        // 获取光标位置
-        const cursorIndex = quill.selection.savedRange?.index || 0;
+        let length = quill.selection.savedRange.index;
-
         const { data } = await uploadVideo(formData);
-        quill.insertEmbed(cursorIndex, "video", {
+        quill.insertEmbed(length, "video", {
-            url: h + data.path,
+            url: h + data.path, //h + data.fileUrl, //
             id: generateUUID()
         });
-        quill.setSelection(cursorIndex + 1);
+        uploadFileVideo.value.value = "";
     } catch (error) {
-        console.error("视频上传失败:", error);
+        console.log(error);
-    } finally {
-        evt.target.value = "";
     }
 };
 
-// 内容变化监听
+// 监听富文本内容变化，删除被服务器中被用户回车删除的图片
 const onContentChange = content => {
     emit("handleRichTextContentChange", content);
 };
-
+// 增加hover工具栏有中文提示
-// 初始化标题提示
 const initTitle = () => {
-    for (const item of titleConfig.value) {
+    document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
-        const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
+    for (let item of titleConfig.value) {
-        if (tip) tip.setAttribute("title", item.title);
+        let tip = document.querySelector(".ql-toolbar " + item.Choice);
+        if (!tip) continue;
+        tip.setAttribute("title", item.title);
     }
 };
-
 onMounted(() => {
     initTitle();
     oldContent.value = props.content;

src/components/Editor/index2.vue

@@ -0,0 +1,260 @@
+<template>
+    <el-upload
+        :id="uuid"
+        action="#"
+        :multiple="true"
+        :show-file-list="false"
+        :http-request="() => {}"
+        :before-upload="() => false"
+        @change="handleFileChange"
+        class="editor-img-uploader"
+        accept=".jpeg,.jpg,.png,.gif"
+    >
+        <i ref="uploadRef" class="Plus editor-img-uploader"></i>
+    </el-upload>
+    <input
+        type="file"
+        accept="video/*"
+        name="file"
+        ref="uploadFileVideo"
+        id="uploadFileVideo"
+        @change="handleVideoUpload"
+        style="width: 0; height: 0; cursor: pointer; opacity: 0"
+    />
+    <div class="editor">
+        <QuillEditor
+            id="editorId"
+            ref="myQuillEditor"
+            v-model:content="editorContent"
+            contentType="html"
+            @update:content="onContentChange"
+            :options="options"
+        />
+    </div>
+</template>
+
+<script setup name="Editor">
+import { QuillEditor, Quill } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted } from "vue";
+import { generateUUID } from "@/utils";
+import { h } from "@/utils/url";
+import { routerObj } from "./utils.js";
+import { titleConfig } from "./titleConfig.js";
+import { uploadVideo, uploadImg } from "@/api/modules/upload";
+
+// 字体配置
+let fontSizeStyle = Quill.import("attributors/style/size");
+fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
+Quill.register(fontSizeStyle, true);
+
+// 自定义模块
+import ImageBlot from "./quill-image";
+import Video from "./quill-video";
+Quill.register(Video);
+Quill.register(ImageBlot);
+
+// 路由相关
+const $router = useRouter();
+const routerValueName = $router.currentRoute.value.name;
+const routerName = ref(routerObj[routerValueName]);
+
+// 核心：上传队列 + 临时去重集合
+const uploadQueue = ref([]);
+const isProcessing = ref(false);
+const uuid = ref(generateUUID());
+const tempProcessedFiles = ref(new Set());
+
+// 编辑器基础
+const { proxy } = getCurrentInstance();
+const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
+const uploadFileVideo = ref(null);
+const myQuillEditor = ref(null);
+const oldContent = ref("");
+
+// Props
+const props = defineProps({
+    content: { type: String, default: "" },
+    readOnly: { type: Boolean, default: false },
+    fileSizeLimit: { type: Number, default: 10 }
+});
+
+// 内容双向绑定
+const editorContent = computed({
+    get: () => props.content,
+    set: val => emit("update:content", val)
+});
+
+// 编辑器配置
+const options = reactive({
+    theme: "snow",
+    modules: {
+        toolbar: {
+            container: [
+                ["bold", "italic", "underline", "strike"],
+                ["blockquote", "code-block"],
+                [{ list: "ordered" }, { list: "bullet" }],
+                [{ indent: "-1" }, { indent: "+1" }],
+                [{ size: fontSizeStyle.whitelist }],
+                [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                [{ color: [] }, { background: [] }],
+                [{ align: [] }],
+                ["clean"],
+                ["link", "image", "video"]
+            ],
+            handlers: {
+                image: () => proxy.$refs.uploadRef.click(),
+                video: () => document.querySelector("#uploadFileVideo")?.click()
+            }
+        }
+    },
+    placeholder: "请输入内容...",
+    readOnly: props.readOnly
+});
+
+// 处理文件选择（关键修改：记录原始顺序）
+const handleFileChange = (file, fileList) => {
+    if (!fileList.length) return;
+
+    const rawEditor = toRaw(myQuillEditor.value);
+    const quill = rawEditor?.getQuill();
+    if (!quill) return;
+
+    // 生成文件唯一标识
+    const getFileKey = file => `${file.name}-${file.size}-${file.lastModified}`;
+
+    // 过滤重复文件
+    const newFiles = fileList.filter(item => {
+        const file = item.raw;
+        const key = getFileKey(file);
+        if (tempProcessedFiles.value.has(key)) {
+            console.log(`跳过重复文件: ${file.name}`);
+            return false;
+        }
+        if (!validateFile(file)) return false;
+        tempProcessedFiles.value.add(key);
+        return true;
+    });
+
+    if (!newFiles.length) return;
+
+    // 获取初始光标位置（所有图片将按顺序插入此位置之后）
+    const baseCursorIndex = quill.selection.savedRange?.index || quill.getLength();
+
+    // 按用户选择顺序添加到队列（关键修改：使用原始索引）
+    newFiles.forEach((item, index) => {
+        uploadQueue.value.push({
+            file: item.raw,
+            originalIndex: index, // 记录用户选择的原始顺序
+            baseCursorIndex // 所有图片共享同一个基础位置
+        });
+    });
+
+    if (!isProcessing.value) {
+        processQueue();
+    }
+};
+
+// 文件校验
+const validateFile = file => {
+    const isImage = file.type.startsWith("image/");
+    if (!isImage) {
+        alert("请上传图片文件");
+        return false;
+    }
+
+    const fileSizeMB = file.size / 1024 / 1024;
+    if (fileSizeMB > props.fileSizeLimit) {
+        alert(`文件 ${file.name} 大小超过 ${props.fileSizeLimit} MB`);
+        return false;
+    }
+
+    return true;
+};
+
+// 处理上传队列（关键修改：按原始顺序插入）
+const processQueue = async () => {
+    if (isProcessing.value || uploadQueue.value.length === 0) return;
+
+    isProcessing.value = true;
+    const { file, originalIndex, baseCursorIndex } = uploadQueue.value[0];
+
+    try {
+        const formData = new FormData();
+        formData.append("image", file);
+        const result = await uploadImg(formData, routerName.value);
+
+        if (result?.code === 0) {
+            const rawEditor = toRaw(myQuillEditor.value);
+            const quill = rawEditor.getQuill();
+
+            // 关键修改：计算正确的插入位置（基于原始顺序和基础位置）
+            const insertPosition = baseCursorIndex + originalIndex;
+
+            quill.insertEmbed(insertPosition, "image", {
+                url: h + result.data.path,
+                id: generateUUID()
+            });
+
+            // 不更新光标位置，确保后续图片按原始顺序插入
+            // quill.setSelection(insertPosition + 1);
+        }
+    } catch (error) {
+        console.error(`文件 ${file.name} 上传失败:`, error);
+    } finally {
+        uploadQueue.value.shift();
+        if (uploadQueue.value.length === 0) {
+            tempProcessedFiles.value.clear();
+        }
+        isProcessing.value = false;
+        processQueue();
+    }
+};
+
+// 视频上传
+const handleVideoUpload = async evt => {
+    if (evt.target.files.length === 0) return;
+
+    const file = evt.target.files[0];
+    const formData = new FormData();
+    formData.append("video", file);
+
+    try {
+        const rawEditor = toRaw(myQuillEditor.value);
+        const quill = rawEditor.getQuill();
+        const cursorIndex = quill.selection.savedRange?.index || 0;
+
+        const { data } = await uploadVideo(formData);
+        quill.insertEmbed(cursorIndex, "video", {
+            url: h + data.path,
+            id: generateUUID()
+        });
+        quill.setSelection(cursorIndex + 1);
+    } catch (error) {
+        console.error("视频上传失败:", error);
+    } finally {
+        evt.target.value = "";
+    }
+};
+
+// 内容变化监听
+const onContentChange = content => {
+    emit("handleRichTextContentChange", content);
+};
+
+// 初始化标题提示
+const initTitle = () => {
+    for (const item of titleConfig.value) {
+        const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
+        if (tip) tip.setAttribute("title", item.title);
+    }
+};
+
+onMounted(() => {
+    initTitle();
+    oldContent.value = props.content;
+});
+</script>
+<style lang="scss">
+@import "./index.scss";
+</style>

src/components/Upload/UploadImg.vue

@@ -119,7 +119,7 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
         const api = props.api ?? uploadImg;
 
         const result = await api(formData, routerName.value);
-        if (result?.code === 0) {
+        if (result?.data?.code === 0) {
             const { data } = result;
             emit("update:imageUrl", data.path);
         }

src/components/Upload/UploadImgs.vue

@@ -134,7 +134,10 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
     formData.append("image", options.file);
     try {
         const api = props.api ?? uploadImg;
+
         const { data } = await api(formData, routerName.value);
+        console.log(data, "============>>>.");
+
         console.log(data.path, "========data==========");
         options.onSuccess(data.path);
     } catch (error) {