feat: 🚀 图片上传按顺序回显

2025-07-16 15:36:48 +08:00
parent ebef3963f8
commit e24a4adec6
10 changed files with 1147 additions and 170 deletions
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -4,15 +4,14 @@
        action="#"
        :multiple="true"
        :show-file-list="false"
-        :http-request="handleHttpUpload"
-        :before-upload="handleBeforeUpload"
+        :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 标签劫持原本视频上传事件，实现视频上传 -->
    <input
        type="file"
        accept="video/*"
@@ -43,195 +42,219 @@ 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";
-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 oldContent = ref("");
+
+// Props
 const props = defineProps({
-    /* 编辑器的内容 */
-    content: {
-        type: String,
-        default: ""
-    },
-    /* 只读 */
-    readOnly: {
-        type: Boolean,
-        default: false
-    },
-    // 上传文件大小限制(MB)
-    fileSizeLimit: {
-        type: Number,
-        default: 10
-    }
+    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);
-    }
+    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"], // 加粗 斜体 下划线 删除线
-                ["blockquote", "code-block"], // 引用  代码块
-                [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
-                [{ indent: "-1" }, { indent: "+1" }], // 缩进
-                [{ size: ["small", false, "large", "huge"] }], // 字体大小
-                [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-                [{ align: [] }], // 对齐方式
-                ["clean"], // 清除文本格式
-                ["link", "image", "video"] // 链接、图片、视频
+                ["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: 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);
-                    }
-                }
+                image: () => proxy.$refs.uploadRef.click(),
+                video: () => document.querySelector("#uploadFileVideo")?.click()
            }
        }
    },
    placeholder: "请输入内容...",
-    readOnly: props.readOnly,
-    clipboard: {
-        matchers: [
-            [
-                "img",
-                (node, delta) => {
-                    const src = node.getAttribute("src");
-                    const id = node.getAttribute("id");
-                    delta.insert({ image: { src, id: id } });
-                }
-            ]
-        ]
-    }
+    readOnly: props.readOnly
 });
-//上传前的钩子
-const handleBeforeUpload = file => {
-    const fileType = file.type;

-    // 图片
-    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!`);
+// 处理文件选择（临时去重，仅当前批次有效）
+const handleFileChange = (file, fileList) => {
+    if (!fileList.length) return;
+
+    const rawEditor = toRaw(myQuillEditor.value);
+    const quill = rawEditor?.getQuill();
+    if (!quill) return;
+
+    // 获取初始光标位置
+    let baseCursorIndex = quill.selection.savedRange?.index || 0;
+
+    // 生成文件唯一标识（用于临时去重）
+    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;
-        } else {
-            console.log(`RIch MB!`);
-            return true;
        }
-    } else {
-        alert(`文件格式不正确！`);
-        return false;
-    }
-};
-//图片上传
-const handleHttpUpload = async options => {
-    let formData = new FormData();
-    //这里要根据后端设置的name设置key值,如果name是file就传file是image就传image
-    formData.append("image", options.file);
-    try {
-        const result = await uploadImg(formData, routerName.value);
-        if (result?.code === 0) {
-            const { data } = result;
-            let rawMyQuillEditor = toRaw(myQuillEditor.value);
-            // 获取富文本实例
-            let quill = rawMyQuillEditor.getQuill();
-            // 获取光标位置
-            let length = quill.selection.savedRange.index;
-            quill.insertEmbed(length, "image", {
-                url: h + data.path,
-                id: generateUUID()
-            });
-            quill.setSelection(length + 1);
-        }
-    } catch (error) {}
-};
+        // 校验文件合法性
+        if (!validateFile(file)) return false;
+        // 添加到临时去重集合
+        tempProcessedFiles.value.add(key);
+        return true;
+    });

-//视频上传
-const handleVideoUpload = async evt => {
-    if (evt.target.files.length === 0) {
+    if (!newFiles.length) {
+        alert("所选文件已在当前上传批次中或不合法");
        return;
    }
-    const formData = new FormData();
-    formData.append("video", evt.target.files[0]);
-    try {
-        let quill = toRaw(myQuillEditor.value).getQuill();
-        // 获取光标位置
-        let length = quill.selection.savedRange.index;
-        const { data } = await uploadVideo(formData);
-        quill.insertEmbed(length, "video", {
-            url: h + data.path, //h + data.fileUrl, //
-            id: generateUUID()
+
+    // 按选择顺序添加到队列
+    newFiles.forEach((item, index) => {
+        uploadQueue.value.push({
+            file: item.raw,
+            cursorIndex: baseCursorIndex + index
        });
-        uploadFileVideo.value.value = "";
-    } catch (error) {
-        console.log(error);
+    });
+
+    // 启动队列处理
+    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);
+        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);
+        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);
 };
-// 增加hover工具栏有中文提示
+
+// 初始化标题提示
 const initTitle = () => {
-    document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
-    for (let item of titleConfig.value) {
-        let tip = document.querySelector(".ql-toolbar " + item.Choice);
-        if (!tip) continue;
-        tip.setAttribute("title", item.title);
+    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;