无法在客户端将 FormData() 对象与多个压缩图像追加

Question

在发出请求之前，我试图使用Compressor JS在客户端压缩图像，因为以原始大小上传图像需要花费大量时间。

我遇到的问题是：
我的代码中有一个FormData((对象被声明为"fd"，当我尝试通过Compressor JS中的成功挂钩函数将图像附加到它时，它什么都没做(对象保持原样(这是代码

var fd = new FormData();
const fileList = document.querySelector('[type=file]').files;
for (file of fileList) {
                
    new Compressor(file, {
        quality: 0.4,
        maxWidth: 800,
        success: function (result) {
            fd.append('compressedImage', result, result.name);
        },
    });
}

基本上，我循环浏览文件阵列，并逐个压缩每个图像。

我注意到：
通过在循环之前创建一个新的空数组，并将每个图像附加到该数组中，应该可以获得数组中的所有压缩图像这就是我的意思

const fileList = document.querySelector('[type=file]').files;
compressedImgs = [];
for (file of fileList) {
    new Compressor(file, {
        quality: 0.4,
        maxWidth: 800,
        success: function (result) {
            compressedImgs.push(result);
        },
    });
}

HOWEVER，console.log(compressedImgs)输出这个(没有什么异常，因为我在输入中添加了2个图像(：单击此处查看输出
但是，当我尝试记录数组的一个元素(例如compressedImages[0](时，会输出未定义的。

我需要一种方法将我的压缩文件放入FormData((中，以便能够将它们发送到服务器。

Answer 1

在我传递给您的wetransfer链接中，有一个使用CompressorJS库并保存在PHP中的完整示例。它是有效的，也许它会帮助你解决你的问题，以防你忽视了什么。

此外，如果它是有帮助的，你可以解决问题，如果你评论你是如何解决的，它将是有帮助

以下是对我来说正常工作的代码：

index.html

<input type="file" accept="image/*" multiple>
<script>
    const formData = new FormData()
    window.addEventListener('load', function () {
        const fileInput = document.querySelector('[type=file]')
        fileInput.addEventListener('change', function (e) {
            const files = e.target.files
            const promises = []
            for (let file of files) {
                promises.push(new Promise(function (resolve, reject) {
                    new Compressor(file, {
                        quality: 0.6,
                        success(result) {
                            formData.append('files[]', result, result.name)
                            console.log(result)
                            resolve()
                        },
                        error(err) {
                            console.log(err.message)
                            reject()
                        },
                    })
                }))
            }
            Promise.all(promises).then(function () {
                console.log(Array.from(formData.values()))
                const request = new XMLHttpRequest()
                request.open("POST", "./files-handler.php")
                request.send(formData)
            })
        })
    })
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/compressorjs/1.0.7/compressor.min.js"></script>

files-handler.php

$data = [];
$data['_FILES'] = $_FILES;
$data['_POST'] = $_POST;
$data['uploadedFiles'] = [];
$uploadDir = __DIR__ . '/uploads/';
$data['uploadDir'] = $uploadDir;
if (!file_exists($uploadDir)) {
    mkdir($uploadDir, 0777);
}
$filesInput = $_FILES['files'];
$filesName = $filesInput['name'];
$filesTmpName = $filesInput['tmp_name'];
$filesError = $filesInput['error'];
foreach ($filesName as $index => $name) {
    if ($filesError[$index] == UPLOAD_ERR_OK) {
        $toPath = $uploadDir . uniqid() . '_' . $name;
        $uploaded = move_uploaded_file($filesTmpName[$index], $toPath);
        if ($uploaded) {
            $data['uploadedFiles'][] = $toPath;
        }
    }
}
header('Content-Type: application/json');
echo json_encode($data);

Answer 2

尝试将compressedImage更改为compressedImage[]。

类似于：

let formData = new FormData()
let fileInput = document.querySelector('[type=file]')
fileInput.addEventListener('change', function(e){
    
    let files = e.target.files
    
    for(let file of files){
        formData.append('files[]', file)
    }
    
    console.log(Array.from(formData.values()))
    
})

<input type="file" multiple/>

编辑1:查看表单提交代码以及一些服务器代码会很有用。

然而，我想到了另一件事，你是用Content-Type multipart/form-data提交文件吗？

以上内容对于向服务器提交文件非常重要。