Create 240429imgupload.js

240429imgupload.js

@@ -0,0 +1,106 @@
+// 假设页面已经加载了image-compression库
+
+// JavaScript函数，用于上传单个图片并返回完整的URL地址
+function uploadImageAndGetFullUrl(uploadEndpoint, hostUrl, file) {
+    const formData = new FormData();
+
+    // 图片压缩功能
+  function handleCompressFile(file) {
+  const maxFileSize = 5 * 1024 * 1024; // 5MB
+  return new Promise((resolve) => {
+    if (file.size <= maxFileSize || !file.type.startsWith("image")) {
+      resolve(file);
+    } else {
+      imageCompression(file, { maxSizeMB: 5 })
+        .then((compressedFile) => {
+          resolve(compressedFile);
+        })
+        .catch((error) => {
+          console.error(">> imageCompression error", error);
+          resolve(file);
+        });
+    }
+  });
+}
+
+  
+
+    // 压缩图片并上传
+  const uphostUrl = 'https://testupimg.wook.eu.org';
+    //'https://testupimg.sokwith.workers.dev'
+    return handleCompressFile(file).then(compressedFile => {
+        formData.append("file", compressedFile);
+        return fetch(`${uphostUrl}${uploadEndpoint}`, {
+            method: 'POST',
+            body: formData
+        });
+    });
+}
+
+// 定义host URL和上传端点
+const hostUrl = 'https://imghost.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 => {
+                   // console.log(data);
+                    if (data.error) {
+                        throw new Error(data.error);
+                    }
+                    // 创建一个变量来存储完整的图片URL
+                    const imageUrl = `${hostUrl}${data[0].src}`;
+                    // 在控制台输出完整的图片URL
+                    console.log(imageUrl);
+                    // 返回完整的图片URL
+                    return imageUrl;
+                });
+        });
+
+        Promise.all(uploadPromises)
+            .then(fullUrls => {
+                // 将获取到的URLs添加到文本区域
+                urlTextArea.value = fullUrls.join('\n');
+
+                // 使用新的URLs重新提交表单
+                //form.submit();
+            })
+            .catch(error => {
+                console.error('上传失败:', error);
+            });
+    });
+});
+
+function confirmDelete() {
+    return confirm('确定要删除这张图片吗？');
+}