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

Posted 2023-02-22

【中文标题】在文件输入上使用 JavaScript 压缩图像不起作用。我哪里错了？

【英文标题】：Compressing images using JavaScript on File input is not working. Where am I going wrong?

【发布时间】：2022-01-24 01:58:28

【问题描述】：

这是我将它发送到我的 php 服务器时工作的数组。该数组中的图像未压缩。

Array ( [name] => Array ( [0] => IMG_3272.jpg ) [type] => Array ( [0] => image/jpeg ) [tmp_name] => Array ( [0] => C:\xampp\tmp\phpE857.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:\xampp\tmp\php4129.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 代码。在 post 请求路由中

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

【问题讨论】：

你已经损坏了 mime 类型 image/jpeg 变成了 img/jpg 你的更改。此外，不一定是坏的（但很可能是）：你的文件大小从 2.2MB 变成了 12 字节，所以要么你发明了有史以来最惊人的压缩算法，并且即将赚大钱，把它卖给 netflix，或者压缩失败。

谢谢@Raxi。你是对的。看来我要很有钱了！ JK。我想到了。感谢您指出所有错误。我终于可以在前端压缩图像了。该死，我花了很长时间才弄清楚。

:) 别担心，干得好

【参考方案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