feat: 🚀 图片排序
This commit is contained in:
@@ -177,7 +177,7 @@ const currentEditingTabsRef = ref(null);
|
||||
const props = defineProps({
|
||||
content: { type: String, default: "" },
|
||||
readOnly: { type: Boolean, default: false },
|
||||
fileSizeLimit: { type: Number, default: 10 }
|
||||
fileSizeLimit: { type: Number, default: 5 }
|
||||
});
|
||||
|
||||
// 主编辑器内容双向绑定
|
||||
@@ -239,6 +239,7 @@ const options = reactive({
|
||||
const options1 = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
strict: false,
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
@@ -279,7 +280,6 @@ const options1 = reactive({
|
||||
const handleBeforeUpload = file => {
|
||||
const fileType = file.type;
|
||||
file.customUid = generateUUID();
|
||||
imageListDb.value.push(file);
|
||||
|
||||
const validTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg", "image/bmp", "image/webp"];
|
||||
if (!validTypes.includes(fileType)) {
|
||||
@@ -294,10 +294,82 @@ const handleBeforeUpload = file => {
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
imageListDb.value.push({
|
||||
...file,
|
||||
order: imageListDb.value.length
|
||||
});
|
||||
|
||||
imageListDb.value = [...imageListDb.value].sort((a, b) => a.order - b.order);
|
||||
|
||||
console.log(imageListDb.value, "=================value==================");
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleHttpUpload = async options => {
|
||||
let formData = new FormData();
|
||||
formData.append("image", options.file);
|
||||
|
||||
try {
|
||||
const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
if (result?.data?.code === 0) {
|
||||
const { data } = result.data;
|
||||
const { imgId } = result;
|
||||
|
||||
const fileItem = imageListDb.value.find(item => item.customUid === imgId);
|
||||
console.log(fileItem, "=fileItem=");
|
||||
if (fileItem) {
|
||||
fileItem.serverImgId = imgId;
|
||||
fileItem.path = data.path;
|
||||
// 记录完成时间，用于排序
|
||||
fileItem.completeTime = Date.now();
|
||||
}
|
||||
|
||||
const allFilesUploaded = imageListDb.value.every(item => item.path);
|
||||
console.log(allFilesUploaded, "=allFilesUploaded=");
|
||||
|
||||
if (allFilesUploaded) {
|
||||
let rawQuillEditor = "";
|
||||
let quill = "";
|
||||
if (activeEditor.value === "main") {
|
||||
rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
}
|
||||
// 获取当前光标位置
|
||||
const selection = quill.getSelection();
|
||||
const insertPosition = selection ? selection.index : quill.getLength();
|
||||
|
||||
// 关键修改：按照原始上传顺序排序
|
||||
// 假设imageListDb中的顺序就是上传顺序
|
||||
// 或者如果有order属性，可以按照order排序
|
||||
const sortedImages = [...imageListDb.value];
|
||||
|
||||
// 按顺序插入图片
|
||||
sortedImages.forEach((item, index) => {
|
||||
quill.insertEmbed(insertPosition + index, "customImage", {
|
||||
url: "https://dev.ow.f2b211.com" + item.path,
|
||||
id: item.serverImgId || generateUUID()
|
||||
});
|
||||
});
|
||||
|
||||
// 最终光标定位到最后一张图片后面
|
||||
const finalPosition = insertPosition + sortedImages.length;
|
||||
quill.setSelection(finalPosition);
|
||||
|
||||
imageList.value = [];
|
||||
imageListDb.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("图片上传失败:", error);
|
||||
imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
|
||||
}
|
||||
};
|
||||
|
||||
// // 图片上传（保持不变）
|
||||
// const handleHttpUpload = async options => {
|
||||
// let formData = new FormData();
|
||||
@@ -352,71 +424,76 @@ const handleBeforeUpload = file => {
|
||||
// }
|
||||
// };
|
||||
|
||||
// // 图片上传（修改插入位置逻辑）
|
||||
const handleHttpUpload = async options => {
|
||||
let formData = new FormData();
|
||||
formData.append("image", options.file);
|
||||
// imageList.value.push(options.file);
|
||||
// // // 图片上传（修改插入位置逻辑）
|
||||
// const handleHttpUpload = async options => {
|
||||
// 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);
|
||||
if (result?.data?.code === 0) {
|
||||
const { data } = result.data;
|
||||
const { imgId } = result;
|
||||
// imageListDb.value.forEach(item => {
|
||||
// if (item.customUid === imgId) {
|
||||
// item.serverImgId = imgId;
|
||||
// item.path = data.path;
|
||||
// console.log(item.path, "================>");
|
||||
// }
|
||||
// });
|
||||
const fileItem = imageListDb.value.find(item => item.customUid === imgId);
|
||||
console.log(fileItem, "=fileItem=");
|
||||
if (fileItem) {
|
||||
fileItem.serverImgId = imgId;
|
||||
fileItem.path = data.path;
|
||||
}
|
||||
const allFilesUploaded = imageListDb.value.every(item => item.path);
|
||||
if (allFilesUploaded) {
|
||||
let rawQuillEditor = "";
|
||||
let quill = "";
|
||||
if (activeEditor.value === "main") {
|
||||
rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
}
|
||||
// try {
|
||||
// const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
// if (result?.data?.code === 0) {
|
||||
// const { data } = result.data;
|
||||
// const { imgId } = result;
|
||||
// // imageListDb.value.forEach(item => {
|
||||
// // if (item.customUid === imgId) {
|
||||
// // item.serverImgId = imgId;
|
||||
// // item.path = data.path;
|
||||
// // console.log(item.path, "================>");
|
||||
// // }
|
||||
// // });
|
||||
// const fileItem = imageListDb.value.find(item => item.customUid === imgId);
|
||||
// console.log(fileItem, "=fileItem=");
|
||||
// if (fileItem) {
|
||||
// fileItem.serverImgId = imgId;
|
||||
// fileItem.path = data.path;
|
||||
// }
|
||||
// const allFilesUploaded = imageListDb.value.every(item => item.path);
|
||||
// console.log(allFilesUploaded, "=allFilesUploaded=");
|
||||
// if (allFilesUploaded) {
|
||||
// let rawQuillEditor = "";
|
||||
// let quill = "";
|
||||
// if (activeEditor.value === "main") {
|
||||
// rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
// quill = rawQuillEditor.getQuill();
|
||||
// } else {
|
||||
// const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
// rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
// quill = rawQuillEditor.getQuill();
|
||||
// }
|
||||
|
||||
// 关键修改：获取当前光标位置（选区起始索引）
|
||||
const selection = quill.getSelection();
|
||||
// 如果没有选区（光标未激活），默认插入到末尾
|
||||
const insertPosition = selection ? selection.index : quill.getLength();
|
||||
imageListDb?.value?.forEach(item => {
|
||||
// 使用光标位置插入图片
|
||||
quill.insertEmbed(insertPosition, "customImage", {
|
||||
url: item.path,
|
||||
id: item.serverImgId || generateUUID()
|
||||
});
|
||||
// 插入后光标后移一位（避免多张图片重叠插入）
|
||||
quill.setSelection(insertPosition + 1);
|
||||
});
|
||||
// // 关键修改：获取当前光标位置（选区起始索引）
|
||||
// const selection = quill.getSelection();
|
||||
// // 如果没有选区（光标未激活），默认插入到末尾
|
||||
// const insertPosition = selection ? selection.index : quill.getLength();
|
||||
// console.log(imageListDb, "=imageListDb=");
|
||||
// imageListDb?.value?.forEach(item => {
|
||||
// // 使用光标位置插入图片
|
||||
// setTimeout(() => {
|
||||
// quill.insertEmbed(insertPosition, "customImage", {
|
||||
// url: "https://dev.ow.f2b211.com" + item.path,
|
||||
// id: item.serverImgId || generateUUID()
|
||||
// });
|
||||
// }, 100);
|
||||
|
||||
// 最终光标定位到最后一张图片后面
|
||||
const finalPosition = insertPosition + imageListDb.value.length;
|
||||
quill.setSelection(finalPosition);
|
||||
// // 插入后光标后移一位（避免多张图片重叠插入）
|
||||
// quill.setSelection(insertPosition + 1);
|
||||
// });
|
||||
|
||||
imageList.value = [];
|
||||
imageListDb.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("图片上传失败:", error);
|
||||
imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
|
||||
}
|
||||
};
|
||||
// // 最终光标定位到最后一张图片后面
|
||||
// const finalPosition = insertPosition + imageListDb.value.length;
|
||||
// quill.setSelection(finalPosition);
|
||||
|
||||
// imageList.value = [];
|
||||
// imageListDb.value = [];
|
||||
// }
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("图片上传失败:", error);
|
||||
// imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
|
||||
// imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
|
||||
// }
|
||||
// };
|
||||
|
||||
// 视频上传（保持不变）
|
||||
// const handleVideoUpload = async evt => {
|
||||
@@ -451,13 +528,14 @@ const handleVideoUpload = async evt => {
|
||||
const file = evt.target.files[0];
|
||||
|
||||
// 1. 校验视频文件
|
||||
const maxSize = props.fileSizeLimit * 1024 * 1024 * 15;
|
||||
const maxSize = 150 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
ElNotification({
|
||||
title: "文件过大",
|
||||
message: `视频大小不能超过 ${props.fileSizeLimit}MB`,
|
||||
message: `视频大小不能超过 ${150}MB`,
|
||||
type: "warning"
|
||||
});
|
||||
evt.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user