晴玖客服系统自定义JS实现粘贴发送图片功能

该代码适用于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);
                });
        }
    });

超管后台自定义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);
                });
        }
    });

客服后台暂时无法渲染图片，等待后续官方更新！