240429imgupload.js

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