feat: 🚀 批量图片排序
This commit is contained in:
@@ -4,14 +4,15 @@
|
||||
action="#"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:http-request="() => {}"
|
||||
:before-upload="() => false"
|
||||
@change="handleFileChange"
|
||||
:http-request="handleHttpUpload"
|
||||
:before-upload="handleBeforeUpload"
|
||||
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 oldContent = ref("");
|
||||
|
||||
// Props
|
||||
const imageList = ref([]);
|
||||
const imageListDb = ref([]);
|
||||
const props = defineProps({
|
||||
content: { type: String, default: "" },
|
||||
readOnly: { type: Boolean, default: false },
|
||||
fileSizeLimit: { type: Number, default: 10 }
|
||||
/* 编辑器的内容 */
|
||||
content: {
|
||||
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"],
|
||||
["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"]
|
||||
["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"] // 链接、图片、视频
|
||||
],
|
||||
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) => {
|
||||
if (!fileList.length) return;
|
||||
// 上传前的钩子
|
||||
const handleBeforeUpload = file => {
|
||||
const fileType = file.type;
|
||||
console.log(file, "====file====");
|
||||
|
||||
const rawEditor = toRaw(myQuillEditor.value);
|
||||
const quill = rawEditor?.getQuill();
|
||||
if (!quill) return;
|
||||
// 为文件添加唯一标识
|
||||
file.customUid = generateUUID(); // 确保有唯一ID
|
||||
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"
|
||||
];
|
||||
|
||||
// 生成文件唯一标识（用于临时去重）
|
||||
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}`);
|
||||
if (validTypes.includes(fileType)) {
|
||||
// 校检文件大小
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
|
||||
if (!isLt) {
|
||||
console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
|
||||
alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
|
||||
return false;
|
||||
}
|
||||
// 校验文件合法性
|
||||
if (!validateFile(file)) return false;
|
||||
// 添加到临时去重集合
|
||||
tempProcessedFiles.value.add(key);
|
||||
return true;
|
||||
});
|
||||
} else {
|
||||
alert(`文件格式不正确！`);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
if (!newFiles.length) {
|
||||
alert("所选文件已在当前上传批次中或不合法");
|
||||
// 图片上传
|
||||
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()
|
||||
});
|
||||
|
||||
// 移动光标到插入后的位置
|
||||
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);
|
||||
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);
|
||||
|
||||
formData.append("video", evt.target.files[0]);
|
||||
try {
|
||||
const rawEditor = toRaw(myQuillEditor.value);
|
||||
const quill = rawEditor.getQuill();
|
||||
const cursorIndex = quill.selection.savedRange?.index || 0;
|
||||
|
||||
let quill = toRaw(myQuillEditor.value).getQuill();
|
||||
// 获取光标位置
|
||||
let length = quill.selection.savedRange.index;
|
||||
const { data } = await uploadVideo(formData);
|
||||
quill.insertEmbed(cursorIndex, "video", {
|
||||
url: h + data.path,
|
||||
quill.insertEmbed(length, "video", {
|
||||
url: h + data.path, //h + data.fileUrl, //
|
||||
id: generateUUID()
|
||||
});
|
||||
quill.setSelection(cursorIndex + 1);
|
||||
uploadFileVideo.value.value = "";
|
||||
} catch (error) {
|
||||
console.error("视频上传失败:", error);
|
||||
} finally {
|
||||
evt.target.value = "";
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 内容变化监听
|
||||
// 监听富文本内容变化，删除被服务器中被用户回车删除的图片
|
||||
const onContentChange = content => {
|
||||
emit("handleRichTextContentChange", content);
|
||||
};
|
||||
|
||||
// 初始化标题提示
|
||||
// 增加hover工具栏有中文提示
|
||||
const initTitle = () => {
|
||||
for (const item of titleConfig.value) {
|
||||
const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
|
||||
if (tip) tip.setAttribute("title", item.title);
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initTitle();
|
||||
oldContent.value = props.content;
|
||||
|
||||
260
src/components/Editor/index2.vue
Normal file
260
src/components/Editor/index2.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user