// 假设页面已经加载了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('确定要删除这张图片吗?'); }