在文件输入上使用JavaScript压缩图像不起作用.我哪里错了

Question

这是我将数组发送到PHP服务器时使用的数组。此阵列中未压缩图像。

Array ( [name] => Array ( [0] => IMG_3272.jpg ) [type] => Array ( [0] => image/jpeg ) [tmp_name] => Array ( [0] => C:xampptmpphpE857.tmp ) [error] => Array ( [0] => 0 ) [size] => Array ( [0] => 2267094 ) )

下面是不起作用的数组。此时，图像被压缩。

Array ( [name] => Array ( [0] => IMG_3270.jpg ) [type] => Array ( [0] => img/jpg ) [tmp_name] => Array ( [0] => C:xampptmpphp4129.tmp ) [error] => Array ( [0] => 0 ) [size] => Array ( [0] => 12 ) )

我成功地发送了带有图像附件的电子邮件。然而，当我收到电子邮件并试图打开它时，我会收到错误"；看来我们不支持这种文件格式；。

如果未压缩图像，则可以查看电子邮件的附件。

这里的函数应该压缩图像，并将它们添加到HTML表单中的隐藏输入中。

async function handleImageUpload() {
var fileUpload = document.getElementById("fileUpload");

const options = {
maxSizeMB: 1,
maxWidthOrHeight: 1920,
useWebWorker: true
}
const compressedImages = [];
for(let i = 0; i < fileUpload.files.length; i++){
const imageFile = fileUpload.files[i];
try {
const compressedFile = await imageCompression(imageFile, options);
compressedImages.push(compressedFile)
//   await uploadToServer(compressedFile); // write your own logic
} catch (error) {
console.log(error);
}
}
var fileUploads = document.getElementById("fileUploads");
const dataTransfer = new DataTransfer();
const file = new File([compressedImages[0]['name']], compressedImages[0]['name'], {type: 'img/jpg'})
dataTransfer.items.add(file);
fileUploads.files = dataTransfer.files;
console.log(fileUploads.files)
}

所有这一切的原因都是由于后端发生的古怪逻辑。无论出于什么原因，当我收到一个由近6mb组成的Img数组时，都会发送多封电子邮件。

以下是相关的PHP代码。在请求后路由中

$files = $_FILES['uploaded_files'];
print_r($files);
die();
``

Answer 1

对于任何看到这篇文章的人。

请注意，最终目标是压缩多个文件。现在我只能压缩一个文件。我想我将能够通过for循环对多个文件执行此操作。

前端javascript——

async function handleImageUpload() {
var fileUpload = document.getElementById("fileUpload");

const options = {
maxSizeMB: 1,
maxWidthOrHeight: 1920,
useWebWorker: true
}
const compressedImages = [];
for(let i = 0; i < fileUpload.files.length; i++){
const imageFile = fileUpload.files[i];
try {
console.log(imageFile)
const compressedFile = await imageCompression(imageFile, options);
compressedImages.push(compressedFile)
console.log(compressedImages[0])
} catch (error) {
console.log(error);
}
}
//This is a hidden input in the html document. This is what will be sent to the server.
var fileUploads = document.getElementById("fileUploads");
const dataTransfer = new DataTransfer();
const file = new File([compressedImages[0]], 'Hello_world.jpg',{type:"image/jpeg"})
dataTransfer.items.add(file);
fileUploads.files = dataTransfer.files;
console.log(fileUploads.files)
}

我通过CDN使用了这个npm包https://www.npmjs.com/package/browser-image-compression