NGimageUpload.js

// 假设页面已经加载了image-compression库

// JavaScript函数，用于上传单个图片并返回完整的URL地址
function uploadImageAndGetFullUrl(uploadEndpoint, hostUrl, file) {
    const formData = new FormData();

    // 图片压缩功能
    function compressImage(file) {
        const options = {
            maxSizeMB: 5, // 最大文件大小
            maxWidthOrHeight: 1920, // 图片最大宽度或高度
            useWebWorker: true
        };

        return imageCompression(file, options)
            .then(compressedFile => {
                console.log(`原始文件大小：${file.size / 1024 / 1024} MB`);
                console.log(`压缩后文件大小：${compressedFile.size / 1024 / 1024} MB`);
                return compressedFile;
            })
            .catch(error => {
                console.error('图片压缩失败:', error);
                return file; // 如果压缩失败，返回原始文件
            });
    }

    // 压缩图片并上传
    return compressImage(file).then(compressedFile => {
        formData.append("file", compressedFile);
        return fetch(`${hostUrl}${uploadEndpoint}`, {
            method: 'POST',
            body: formData
        });
    });
}

// 定义host URL和上传端点
const hostUrl = 'https://upimg.wook.eu.org';
const uploadEndpoint = '/upload';

// 在文档加载完成后添加事件监听器
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const urlTextArea = document.querySelector('textarea[name="imageUrls"]');
    const addButton = document.querySelector('input[name="add"]');
    const realFileInput = document.createElement('input');
    realFileInput.type = 'file';
    realFileInput.multiple = true;
    realFileInput.style.display = 'none';

    // 将文件输入元素添加到DOM中，但不显示
    document.body.appendChild(realFileInput);

    // 当点击“批量添加图片”按钮时触发文件输入元素的点击事件
    addButton.addEventListener('click', function(event) {
        if (urlTextArea.value.trim() === '') {
            event.preventDefault();
            realFileInput.click();
        }
    });

    // 处理文件选择
    realFileInput.addEventListener('change', function() {
        const uploadPromises = Array.from(realFileInput.files).map(file => {
            // 调用函数上传图片并获取URL
            return uploadImageAndGetFullUrl(uploadEndpoint, hostUrl, file)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不是OK状态');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.error) {
                        throw new Error(data.error);
                    }
                    return `${hostUrl}${data.src}`;
                });
        });

        Promise.all(uploadPromises)
            .then(fullUrls => {
                // 将获取到的URLs添加到文本区域
                urlTextArea.value = fullUrls.join('\n');

                // 使用新的URLs重新提交表单
                form.submit();
            })
            .catch(error => {
                console.error('上传失败:', error);
            });
    });
});

function confirmDelete() {
    return confirm('确定要删除这张图片吗？');
}