fix: 修复文件上传和编辑器相关问题
- 启用vueDevTools插件用于开发调试 - 移除调试用的console.error/log语句 - 修复文件扩展名获取可能导致的错误 - 优化文件上传逻辑，添加path字段 - 重构编辑器图片上传处理，支持直接发送 - 调整编辑器样式颜色
This commit is contained in:
Phoenix
parent
7067c42b2b
commit
3ec981ea7f
@ -252,8 +252,29 @@ const handlePaste = (event) => {
|
||||
// 获取粘贴的图片文件
|
||||
const file = items[i].getAsFile()
|
||||
if (file) {
|
||||
// 使用现有的上传图片功能处理
|
||||
onUploadFile([file])
|
||||
const tempUrl = URL.createObjectURL(file);
|
||||
const image = new Image();
|
||||
image.src = tempUrl;
|
||||
image.onload = () => {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
form.append("source", "fonchain-chat");
|
||||
form.append("urlParam", `width=${image.width}&height=${image.height}`);
|
||||
insertImage(tempUrl, image.width, image.height);
|
||||
uploadImg(form).then(({ code, data, message }) => {
|
||||
if (code == 0) {
|
||||
const editorImages = editorRef.value.querySelectorAll('img.editor-image');
|
||||
const lastImage = editorImages[editorImages.length - 1];
|
||||
if (lastImage && lastImage.src === tempUrl) {
|
||||
lastImage.src = data.ori_url;
|
||||
handleInput({ target: editorRef.value });
|
||||
}
|
||||
} else {
|
||||
window['$message'].error(message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return
|
||||
}
|
||||
}
|
||||
@ -665,75 +686,44 @@ const formatFileSize = (size) => {
|
||||
return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
|
||||
}
|
||||
}
|
||||
//工具栏中选完图片直接发送
|
||||
const onUploadSendImg=async (eventFile)=>{
|
||||
for (const file of eventFile.target.files) {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
form.append("source", "fonchain-chat");
|
||||
|
||||
|
||||
/**
|
||||
* 文件上传处理
|
||||
* @param e 上传事件对象或文件数组
|
||||
*/
|
||||
// 文件上传处理
|
||||
async function onUploadFile(e) {
|
||||
let files;
|
||||
|
||||
// 判断参数类型
|
||||
if (Array.isArray(e)) {
|
||||
// 直接传入的文件数组
|
||||
files = e;
|
||||
} else {
|
||||
// 传入的是事件对象
|
||||
files = e.target.files;
|
||||
e.target.value = null; // 清空input，允许再次选择相同文件
|
||||
const res=await uploadImg(form)
|
||||
if(res.status===0){
|
||||
const data={
|
||||
height:0,
|
||||
width:0,
|
||||
size:10000,
|
||||
url:res.data.ori_url,
|
||||
}
|
||||
emit(
|
||||
'editor-event',
|
||||
emitCall(
|
||||
'image_event',
|
||||
data
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 确保有文件
|
||||
if (!files || files.length === 0) return;
|
||||
|
||||
// 处理第一个文件
|
||||
const file = files[0];
|
||||
|
||||
}
|
||||
async function onUploadFile(e) {
|
||||
let file = e.target.files[0]
|
||||
|
||||
e.target.value = null // 清空input，允许再次选择相同文件
|
||||
|
||||
console.log("文件类型"+file.type)
|
||||
if (file.type.indexOf('image/') === 0) {
|
||||
console.log("进入图片")
|
||||
// 创建临时URL
|
||||
const tempUrl = URL.createObjectURL(file);
|
||||
|
||||
// 创建图片对象以获取尺寸
|
||||
const image = new Image();
|
||||
image.src = tempUrl;
|
||||
|
||||
image.onload = () => {
|
||||
// 上传图片到服务器
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
form.append("source", "fonchain-chat"); // 图片来源标识
|
||||
form.append("urlParam", `width=${image.width}&height=${image.height}`);
|
||||
|
||||
// 先将临时图片插入编辑器，不直接设置宽高，而是传递原始尺寸信息
|
||||
insertImage(tempUrl, image.width, image.height);
|
||||
|
||||
// 上传图片并获取永久URL
|
||||
uploadImg(form).then(({ code, data, message }) => {
|
||||
if (code == 0) {
|
||||
// 上传成功后，将临时URL替换为永久URL
|
||||
console.log('图片上传成功:', data.ori_url);
|
||||
|
||||
// 查找编辑器中刚插入的图片元素并替换其src为永久URL
|
||||
const editorImages = editorRef.value.querySelectorAll('img.editor-image');
|
||||
// 查找最后插入的图片（通常是最近添加的那个）
|
||||
const lastImage = editorImages[editorImages.length - 1];
|
||||
if (lastImage && lastImage.src === tempUrl) {
|
||||
// 替换为永久URL
|
||||
lastImage.src = data.ori_url;
|
||||
// 触发输入事件更新编辑器内容
|
||||
handleInput({ target: editorRef.value });
|
||||
}
|
||||
} else {
|
||||
window['$message'].error(message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return;
|
||||
// 处理图片文件 - 立即显示临时消息，然后上传
|
||||
let fn = emitCall('image_event', file, () => {})
|
||||
emit('editor-event', fn)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (file.type.indexOf('video/') === 0) {
|
||||
@ -1424,7 +1414,7 @@ const handleEditorClick = (event) => {
|
||||
通过ref获取DOM引用
|
||||
-->
|
||||
<form enctype="multipart/form-data" style="display: none">
|
||||
<input type="file" ref="fileImageRef" accept="image/*" @change="onUploadFile" />
|
||||
<input type="file" ref="fileImageRef" accept="image/*" @change="onUploadSendImg" />
|
||||
<input type="file" ref="uploadFileRef" @change="onUploadFile" />
|
||||
</form>
|
||||
|
||||
@ -1507,12 +1497,6 @@ const handleEditorClick = (event) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件链接样式
|
||||
* 使用:deep()选择器影响组件内部元素
|
||||
* 显示文件链接的卡片式样式
|
||||
*/
|
||||
:deep(.editor-file) {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
@ -1520,7 +1504,7 @@ const handleEditorClick = (event) => {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
color: #2196f3;
|
||||
color: #462AA0;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
padding-right: 60px; /* 为文件大小信息留出空间 */
|
||||
@ -1542,13 +1526,7 @@ const handleEditorClick = (event) => {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
}
|
||||
|
||||
// 表情符号样式
|
||||
/**
|
||||
* 表情符号样式
|
||||
* 使用:deep()选择器影响组件内部元素
|
||||
* 设置表情符号的大小和对齐方式
|
||||
*/
|
||||
|
||||
:deep(.editor-emoji) {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
@ -1556,13 +1534,6 @@ const handleEditorClick = (event) => {
|
||||
vertical-align: middle; /* 垂直居中对齐 */
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 引用消息样式
|
||||
* 使用:deep()选择器影响组件内部元素
|
||||
* 创建带有左侧边框的引用卡片
|
||||
* 使用CSS变量适配不同主题
|
||||
*/
|
||||
:deep(.editor-quote) {
|
||||
margin-bottom: 8px;
|
||||
padding: 8px 12px;
|
||||
|
||||
@ -64,8 +64,8 @@ const fileInfo = computed(() => {
|
||||
|
||||
// 获取文件扩展名
|
||||
function getFileExtension(filepath) {
|
||||
const parts = filepath.split('.')
|
||||
return parts.length > 1 ? parts.pop().toUpperCase() : ''
|
||||
const parts = filepath?.split('.')
|
||||
return parts?.length > 1 ? parts?.pop()?.toUpperCase() : ''
|
||||
}
|
||||
|
||||
// 切换播放状态
|
||||
|
||||
@ -190,8 +190,6 @@ export const useTalkRecord = (uid: number) => {
|
||||
loadConfig.receiver_id = params.receiver_id
|
||||
loadConfig.talk_type = params.talk_type
|
||||
|
||||
console.error('onLoad', params, options)
|
||||
|
||||
// 新增：支持指定消息定位模式，参数以传入为准合并
|
||||
if (options?.specifiedMsg?.cursor !== undefined) {
|
||||
loadConfig.specialParams = { ...options.specifiedMsg } // 记录特殊参数，供分页加载用
|
||||
|
||||
@ -289,7 +289,6 @@ watch(
|
||||
async (newProps) => {
|
||||
await nextTick()
|
||||
let specialParams = undefined
|
||||
console.error(newProps, 'newProps')
|
||||
if (newProps.specifiedMsg) {
|
||||
try {
|
||||
const parsed = JSON.parse(decodeURIComponent(newProps.specifiedMsg))
|
||||
|
||||
@ -101,7 +101,7 @@ const onSendImageEvent = ({ data, callBack }) => {
|
||||
|
||||
// 发送视频消息
|
||||
const onSendVideoEvent = async ({ data }) => {
|
||||
console.log('onSendVideoEvent')
|
||||
|
||||
|
||||
// 获取视频首帧作为封面图
|
||||
// let resp = await getVideoImage(data)
|
||||
@ -166,7 +166,6 @@ const onSendFileEvent = ({ data }) => {
|
||||
return window['$message'].warning('上传文件不能超过100M!')
|
||||
}
|
||||
const clientUploadId = `file-${Date.now()}-${Math.floor(Math.random() * 1000)}`
|
||||
|
||||
const tempMessage = {
|
||||
msg_id: clientUploadId,
|
||||
sequence: Date.now(),
|
||||
@ -182,6 +181,7 @@ const onSendFileEvent = ({ data }) => {
|
||||
extra: {
|
||||
name: data.name,
|
||||
url: '',
|
||||
path:data.name,
|
||||
size: data.size,
|
||||
is_uploading: true,
|
||||
upload_id: clientUploadId,
|
||||
|
||||
@ -46,9 +46,9 @@ export default defineConfig(({ mode }) => {
|
||||
vueJsx({}),
|
||||
compressPlugin(),
|
||||
UnoCSS(),
|
||||
// vueDevTools({
|
||||
// launchEditor: 'trae',
|
||||
// })
|
||||
vueDevTools({
|
||||
launchEditor: 'trae',
|
||||
})
|
||||
],
|
||||
define: {
|
||||
__APP_ENV__: env.APP_ENV
|
||||
|
||||
Loading…
Reference in New Issue
Block a user