Create imageUpload.js

imageUpload.js

@@ -0,0 +1,91 @@
+// 假设页面已经加载了image-compression库
+
+// JavaScript函数，用于上传图片并返回完整的URL地址
+function uploadImagesAndGetFullUrls(fileInputId, uploadEndpoint, hostUrl) {
+    const fileInput = document.getElementById(fileInputId);
+    const files = fileInput.files;
+    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; // 如果压缩失败，返回原始文件
+            });
+    }
+
+    // 处理所有选中的文件
+    const compressPromises = Array.from(files).map(compressImage);
+
+    return Promise.all(compressPromises)
+        .then(compressedFiles => {
+            compressedFiles.forEach(compressedFile => {
+                formData.append('file[]', compressedFile);
+            });
+
+            return fetch(`${hostUrl}${uploadEndpoint}`, {
+                method: 'POST',
+                body: formData
+            });
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('网络响应不是OK状态');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.error) {
+                throw new Error(data.error);
+            }
+            return data.map(item => `${hostUrl}${item.src}`);
+        });
+}
+
+// 定义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 fileInput = document.getElementById('imageFileInput');
+
+    form.addEventListener('submit', function(event) {
+        // 检查URL文本区域是否为空
+        if (urlTextArea.value.trim() === '' && fileInput.files.length > 0) {
+            // 阻止表单的默认提交行为
+            event.preventDefault();
+
+            // 调用函数上传图片并获取URL
+            uploadImagesAndGetFullUrls('imageFileInput', uploadEndpoint, hostUrl)
+                .then(fullUrls => {
+                    // 将获取到的URLs添加到文本区域
+                    urlTextArea.value = fullUrls.join('\n');
+
+                    // 使用新的URLs重新提交表单
+                    form.submit();
+                })
+                .catch(error => {
+                    console.error('上传失败:', error);
+                });
+        }
+    });
+});
+
+function confirmDelete() {
+    return confirm('确定要删除这张图片吗？');
+}