JavaScript客户端图像压缩与文件上传：解决后端文件损坏问题

<!-- 通过CDN引入 -->
<script src="https://cdn.jsdelivr.net/npm/browser-image-compression/dist/browser-image-compression.js"></script>

async function handleImageUpload() {
    // 获取原始文件输入元素
    var originalFileInput = document.getElementById("fileUpload");
    // 获取用于上传到服务器的隐藏文件输入元素
    var targetFileInput = document.getElementById("fileUploads");

    // 定义压缩选项
    const options = {
        maxSizeMB: 1, // 最大文件大小，单位MB
        maxWidthOrHeight: 1920, // 最大宽度或高度，图片将按比例缩小
        useWebWorker: true // 使用Web Worker进行压缩，避免阻塞主线程
    };

    const compressedImages = [];
    // 遍历所有选中的文件
    for (let i = 0; i < originalFileInput.files.length; i++) {
        const imageFile = originalFileInput.files[i];
        console.log("原始文件:", imageFile);

        try {
            // 使用browser-image-compression库进行压缩
            const compressedFile = await imageCompression(imageFile, options);
            compressedImages.push(compressedFile);
            console.log("压缩后文件:", compressedFile);
        } catch (error) {
            console.error("图像压缩失败:", error);
        }
    }

    // 使用DataTransfer API将压缩后的文件添加到新的文件输入
    const dataTransfer = new DataTransfer();

    // 遍历所有压缩后的文件，并添加到DataTransfer对象中
    // 关键步骤：确保将完整的Blob/File对象作为内容，并指定正确的MIME类型
    compressedImages.forEach((compressedFile, index) => {
        // 构造新的File对象
        // 第一个参数是文件的内容（Blob或File对象本身）
        // 第二个参数是文件名（可以保留原名或生成新名）
        // 第三个参数是文件类型（MIME Type），至关重要
        const newFile = new File([compressedFile], compressedFile.name, { type: compressedFile.type });
        dataTransfer.items.add(newFile);
    });

    // 将DataTransfer对象中的文件列表赋给目标文件输入元素
    targetFileInput.files = dataTransfer.files;
    console.log("准备上传的文件列表:", targetFileInput.files);
}

<form action="/upload" method="post" enctype="multipart/form-data">
    <label for="fileUpload">选择图片进行上传:</label>
    <!-- 原始文件输入，用户选择文件 -->
    <input type="file" id="fileUpload" multiple accept="image/*" onchange="handleImageUpload()">
    <br><br>
    <!-- 隐藏的文件输入，用于存储压缩后的文件，名称与后端接收的字段匹配 -->
    <input type="file" id="fileUploads" name="uploaded_files[]" multiple style="display: none;">
    <br>
    <button type="submit">上传文件</button>
</form>

<?php
// 假设前端表单提交到此PHP脚本
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['uploaded_files'])) {
        $files = $_FILES['uploaded_files'];

        // 打印文件信息以验证
        print_r($files);

        // 遍历并处理每个上传的文件
        for ($i = 0; $i < count($files['name']); $i++) {
            $fileName = $files['name'][$i];
            $fileTmpName = $files['tmp_name'][$i];
            $fileSize = $files['size'][$i];
            $fileError = $files['error'][$i];
            $fileType = $files['type'][$i];

            if ($fileError === 0) {
                // 文件上传成功，可以进行后续处理，如移动文件到目标目录
                $uploadDir = 'uploads/';
                $destination = $uploadDir . basename($fileName);
                if (move_uploaded_file($fileTmpName, $destination)) {
                    echo "文件 {$fileName} 上传成功并保存到 {$destination}<br>";
                } else {
                    echo "文件 {$fileName} 移动失败。<br>";
                }
            } else {
                echo "文件 {$fileName} 上传出错，错误码: {$fileError}<br>";
            }
        }
    } else {
        echo "没有接收到文件。<br>";
    }
}
?>