La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

复制粘贴上传图片完善

master
La123123 4 weeks ago
parent
303f603eb1
commit
7113d7b550
1 changed files with 201 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 196
      im-uniapp/pages/chat/chat-box.vue

196
im-uniapp/pages/chat/chat-box.vue
View File

@ -270,6 +270,8 @@ export default {
scrollViewHeight: 0,
maxTmpId: 0,
isFileOpen: false,
isPasting: false, // 防止重复触发粘贴事件
hasPasteListener: false, // 防止重复添加事件监听器
};
},
methods: {
@ -1081,11 +1083,24 @@ export default {
.context((res) => {
this.editorCtx = res.context;
// #ifdef H5
// 只使用document监听粘贴事件，避免重复触发
setTimeout(() => {
document.addEventListener('paste', this.onDocumentPaste);
console.log('已添加粘贴事件监听到document');
}, 100);
// 使用全局变量确保只添加一次监听器
if (!window.__pasteHandlerAdded__) {
window.__pasteHandlerAdded__ = true;
// 初始化全局变量
if (window.__isPasting__ === undefined) {
window.__isPasting__ = false;
}
console.log('[chat-box] 首次添加粘贴事件监听器');
// 移除所有可能的旧监听器
if (this.pasteHandler) {
document.removeEventListener('paste', this.pasteHandler);
}
// 使用bind绑定this，确保this指向正确
this.pasteHandler = this.onDocumentPaste.bind(this);
document.addEventListener('paste', this.pasteHandler);
}
// #endif
})
.exec();
@ -1099,8 +1114,11 @@ export default {
onEditorBlur(e) {
this.isFocus = false;
},
onDocumentPaste(e) {
async onDocumentPaste(e) {
// #ifdef H5
const timestamp = new Date().toISOString();
console.log(`[${timestamp}] 粘贴事件触发, isPasting: ${window.__isPasting__}`);
// 检查是否在editor中粘贴
const activeElement = document.activeElement;
const isInEditor = activeElement && (
@ -1109,25 +1127,37 @@ export default {
);
if (!isInEditor) {
console.log(`[${timestamp}] 不在editor中，忽略`);
return;
}
// 使用全局变量防止重复触发
if (window.__isPasting__) {
console.log(`[${timestamp}] 全局isPasting为true，忽略重复触发`);
e.preventDefault();
e.stopPropagation();
return;
}
console.log('文档粘贴事件触发', e);
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
console.log('剪贴板项', items);
let hasImage = false;
for (let i = 0; i < items.length; i++) {
const item = items[i];
console.log('剪贴板项', i, item);
if (item.kind === 'file' && item.type.startsWith('image/')) {
console.log(`[${timestamp}] 检测到图片，开始处理`);
e.preventDefault();
e.stopPropagation();
hasImage = true;
window.__isPasting__ = true;
try {
const file = item.getAsFile();
console.log('获取到的图片文件', file);
// 将文件转换为临时路径
const reader = new FileReader();
reader.onload = (event) => {
const base64 = event.target.result;
console.log('转换后的base64', base64);
// 将文件转换为base64
const base64 = await this.fileToBase64(file);
console.log(`[${timestamp}] base64转换完成，长度: ${base64.length}`);
// 创建临时文件对象
const tempFile = {
path: base64,
@ -1135,26 +1165,66 @@ export default {
size: file.size,
name: file.name || 'pasted-image.png'
};
// 调用现有的图片上传逻辑
this.handlePasteImage(tempFile);
};
reader.readAsDataURL(file);
await this.handlePasteImage(tempFile);
} catch (error) {
console.log(`[${timestamp}] 处理粘贴图片失败:`, error);
} finally {
window.__isPasting__ = false;
}
break;
}
}
// 如果没有图片，立即重置标志
if (!hasImage) {
console.log(`[${timestamp}] 没有检测到图片`);
this.isPasting = false;
}
// #endif
},
handlePasteImage(file) {
console.log('handlePasteImage被调用', file);
async fileToBase64(file) {
const timestamp = new Date().toISOString();
console.log(`[${timestamp}] fileToBase64被调用，文件大小:`, file.size);
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
console.log(`[${timestamp}] fileToBase64 onload，结果长度:`, event.target.result.length);
resolve(event.target.result);
};
reader.onerror = (error) => {
console.log(`[${timestamp}] fileToBase64 onerror:`, error);
reject(error);
};
reader.readAsDataURL(file);
});
},
async handlePasteImage(file) {
const timestamp = new Date().toISOString();
console.log(`[${timestamp}] handlePasteImage被调用, isPasting: ${window.__isPasting__}, chat:`, this.chat);
// 检查chat是否存在
if (!this.chat) {
console.log(`[${timestamp}] handlePasteImage: chat为空，忽略`);
return;
}
try {
// 检查是否被封禁
if (this.isBanned) {
this.showBannedTip();
return;
}
let data = {
originUrl: file.path,
thumbUrl: file.path,
};
let msgInfo = {
tmpId: this.generateId(),
fileId: file.uid,
@ -1166,36 +1236,46 @@ export default {
readedCount: 0,
status: this.$enums.MESSAGE_STATUS.SENDING,
};
console.log('创建的消息信息', msgInfo);
// 填充对方id
this.fillTargetId(msgInfo, this.chat.targetId);
// 插入消息
this.chatStore.insertMessage(msgInfo, this.chat);
// 会话置顶
this.moveChatToTop();
// 借助file对象保存
file.msgInfo = msgInfo;
file.chat = this.chat;
// 更新图片宽高
let chat = this.chat;
this.getImageSize(file).then((size) => {
console.log('获取到图片尺寸', size);
const size = await this.getImageSize(file);
msgInfo = JSON.parse(JSON.stringify(msgInfo));
data.width = size.width;
data.height = size.height;
msgInfo.content = JSON.stringify(data);
this.chatStore.updateMessage(msgInfo, chat);
this.chatStore.updateMessage(msgInfo, this.chat);
this.scrollToBottom();
});
// 上传图片到服务器
this.uploadPastedImage(file);
await this.uploadPastedImage(file);
} catch (error) {
console.log(`[${timestamp}] 处理粘贴图片失败:`, error);
this.isPasting = false;
}
},
uploadPastedImage(file) {
console.log('uploadPastedImage被调用', file);
async uploadPastedImage(file) {
const timestamp = new Date().toISOString();
console.log(`[${timestamp}] uploadPastedImage被调用`);
// #ifdef H5
try {
// 将base64转换为Blob
const base64Data = file.path.split(',')[1];
console.log('base64数据长度', base64Data.length);
const byteCharacters = atob(base64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += 512) {
@ -1208,43 +1288,39 @@ export default {
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: 'image/png' });
console.log('创建的Blob对象', blob);
// 创建FormData
const formData = new FormData();
formData.append('file', blob, file.name);
console.log('创建的FormData', formData);
// 上传图片
console.log('开始上传图片');
uni.uploadFile({
url: UNI_APP.BASE_URL + `/image/upload?isPermanent=false&thumbSize=50`,
filePath: file.path,
name: 'file',
success: (res) => {
console.log('上传响应', res);
const data = JSON.parse(res.data);
console.log(`[${timestamp}] 开始上传图片`);
// 使用fetch上传
const response = await fetch(UNI_APP.BASE_URL + `/image/upload?isPermanent=false&thumbSize=50`, {
method: 'POST',
body: formData
});
const data = await response.json();
console.log(`[${timestamp}] 上传响应:`, data);
if (data.code === 200) {
console.log('上传成功，响应数据', data.data);
// 上传成功，更新消息
console.log(`[${timestamp}] 上传成功，准备发送消息`);
// 上传成功，更新消息内容
let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
msgInfo.content = JSON.stringify(data.data);
msgInfo.receipt = this.isReceipt;
this.sendMessageRequest(msgInfo)
.then((m) => {
console.log('消息发送成功', m);
this.chatStore.updateMessage(msgInfo, file.chat);
// 发送消息
const m = await this.sendMessageRequest(msgInfo);
console.log(`[${timestamp}] 消息发送成功`);
msgInfo.id = m.id;
msgInfo.status = m.status;
this.isReceipt = false;
this.chatStore.updateMessage(msgInfo, file.chat);
})
.catch(() => {
console.log('消息发送失败');
msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
this.chatStore.updateMessage(msgInfo, file.chat);
});
} else {
console.log('上传失败，响应码', data.code);
console.log(`[${timestamp}] 上传失败:`, data);
uni.showToast({
icon: "none",
title: data.message || "上传失败",
@ -1253,9 +1329,8 @@ export default {
msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
this.chatStore.updateMessage(msgInfo, file.chat);
}
},
fail: (err) => {
console.error("上传图片失败", err);
} catch (error) {
console.log(`[${timestamp}] 上传异常:`, error);
uni.showToast({
icon: "none",
title: "上传失败",
@ -1264,7 +1339,6 @@ export default {
msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
this.chatStore.updateMessage(msgInfo, file.chat);
}
});
// #endif
},
onAudioStateChange(state, msgInfo) {
@ -1772,8 +1846,10 @@ export default {
this.unListenKeyboard();
// #ifdef H5
// 移除粘贴事件监听
if (this.onDocumentPaste) {
document.removeEventListener('paste', this.onDocumentPaste);
if (this.hasPasteListener && this.pasteHandler) {
document.removeEventListener('paste', this.pasteHandler);
this.hasPasteListener = false;
this.pasteHandler = null;
}
// #endif
},

Write Preview
Loading…
Cancel
Save