121
0
0
晴玖客服系统自定义JS实现粘贴发送图片功能
2025-08-12
文章摘要
|
该代码适用于 v1.1.4 版本，后续版本可能会更新此功能！
前台页面自定义JavaScript
document.addEventListener('DOMContentLoaded', function() {
const messageInput = document.getElementById('message-text');
const kefu_sendButton = document.getElementById('send-btn');
// 监听粘贴事件（如果messageInput存在）
if (messageInput) {
messageInput.addEventListener('paste', function(e) {
const items = e.clipboardData.items;
// 检查粘贴的内容是否包含图片
for (let i = 0; i < items.length; i++) {
const item = items[i];
// 如果是图片类型
if (item.type.indexOf('image') !== -1) {
e.preventDefault(); // 阻止默认粘贴行为
// 弹出确认对话框
if (confirm('检测到您粘贴了图片，是否要上传并发送？')) {
const file = item.getAsFile();
uploadImage(file);
}
break;
}
}
});
}
// 上传图片函数
function uploadImage(file) {
// 创建FormData对象
const formData = new FormData();
formData.append('file', file);
// 发送上传请求
fetch('/api/v1/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.code === 200 && data.success) {
// 上传成功，将图片URL包裹在[IMG]标签中并赋值到输入框
const imageUrl = data.data.url;
if (messageInput) {
messageInput.value = '[IMG]' + imageUrl + '[/IMG]';
// 自动触发发送按钮（如果存在）
kefu_sendButton.click();
}
} else {}
})
.catch(error => {
console.error('上传错误:', error);
});
}
});document.addEventListener('DOMContentLoaded', function() {
const messageInput = document.getElementById('message-text');
const kefu_sendButton = document.getElementById('send-btn');
// 监听粘贴事件（如果messageInput存在）
if (messageInput) {
messageInput.addEventListener('paste', function(e) {
const items = e.clipboardData.items;
// 检查粘贴的内容是否包含图片
for (let i = 0; i < items.length; i++) {
const item = items[i];
// 如果是图片类型
if (item.type.indexOf('image') !== -1) {
e.preventDefault(); // 阻止默认粘贴行为
// 弹出确认对话框
if (confirm('检测到您粘贴了图片，是否要上传并发送？')) {
const file = item.getAsFile();
uploadImage(file);
}
break;
}
}
});
}
// 上传图片函数
function uploadImage(file) {
// 创建FormData对象
const formData = new FormData();
formData.append('file', file);
// 发送上传请求
fetch('/api/v1/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.code === 200 && data.success) {
// 上传成功，将图片URL包裹在[IMG]标签中并赋值到输入框
const imageUrl = data.data.url;
if (messageInput) {
messageInput.value = '[IMG]' + imageUrl + '[/IMG]';
// 自动触发发送按钮（如果存在）
kefu_sendButton.click();
}
} else {}
})
.catch(error => {
console.error('上传错误:', error);
});
}
});超管后台自定义JavaScript
document.addEventListener('DOMContentLoaded', function() {
const messageInput = document.getElementById('messageInput');
const kefu_sendButton = document.getElementById('sendButton');
// 监听粘贴事件（如果messageInput存在）
if (messageInput) {
messageInput.addEventListener('paste', function(e) {
const items = e.clipboardData.items;
// 检查粘贴的内容是否包含图片
for (let i = 0; i < items.length; i++) {
const item = items[i];
// 如果是图片类型
if (item.type.indexOf('image') !== -1) {
e.preventDefault(); // 阻止默认粘贴行为
// 弹出确认对话框
if (confirm('检测到您粘贴了图片，是否要上传并发送？')) {
const file = item.getAsFile();
uploadImage(file);
}
break;
}
}
});
}
// 上传图片函数
function uploadImage(file) {
// 创建FormData对象
const formData = new FormData();
formData.append('file', file);
// 发送上传请求
fetch('/api/v1/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.code === 200 && data.success) {
// 上传成功，将图片URL包裹在[IMG]标签中并赋值到输入框
const imageUrl = data.data.url;
if (messageInput) {
messageInput.value = '[IMG]' + imageUrl + '[/IMG]';
// 自动触发发送按钮（如果存在）
kefu_sendButton.click();
}
} else {}
})
.catch(error => {
console.error('上传错误:', error);
});
}
});document.addEventListener('DOMContentLoaded', function() {
const messageInput = document.getElementById('messageInput');
const kefu_sendButton = document.getElementById('sendButton');
// 监听粘贴事件（如果messageInput存在）
if (messageInput) {
messageInput.addEventListener('paste', function(e) {
const items = e.clipboardData.items;
// 检查粘贴的内容是否包含图片
for (let i = 0; i < items.length; i++) {
const item = items[i];
// 如果是图片类型
if (item.type.indexOf('image') !== -1) {
e.preventDefault(); // 阻止默认粘贴行为
// 弹出确认对话框
if (confirm('检测到您粘贴了图片，是否要上传并发送？')) {
const file = item.getAsFile();
uploadImage(file);
}
break;
}
}
});
}
// 上传图片函数
function uploadImage(file) {
// 创建FormData对象
const formData = new FormData();
formData.append('file', file);
// 发送上传请求
fetch('/api/v1/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.code === 200 && data.success) {
// 上传成功，将图片URL包裹在[IMG]标签中并赋值到输入框
const imageUrl = data.data.url;
if (messageInput) {
messageInput.value = '[IMG]' + imageUrl + '[/IMG]';
// 自动触发发送按钮（如果存在）
kefu_sendButton.click();
}
} else {}
})
.catch(error => {
console.error('上传错误:', error);
});
}
});客服后台暂时无法渲染图片，等待后续官方更新！