如何使用compress.js进行多张图片的压缩、预览和上传？

我一直在使用压缩.js https://github.com/fieldchat/client-compress用于单个图像上传。但是，现在我想用它来上传多个图像。

我想要实现的是从 html 输入元素中选择多个图像，然后使用该库对其进行压缩，并在动态生成的标签中预览这些压缩图像。

像这样：-

<img id="preview0"> <img id="preview1"> <img id="preview2">....取决于所选图像的数量。

这就是我使用它来上传单个图像的方式

<input type="file" accept="image/*"   id="image">
<img id="preview">

const options = {
  targetSize: 0.2,
  quality: 0.75,
  maxWidth: 800,
  maxHeight: 600
}

const compress = new Compress(options)
const upload = document.getElementById("image")

upload.addEventListener(
  "change",
  (evt) => {
    const files = [...evt.target.files]
    compress.compress(files).then((conversions) => {
      // Conversions is an array of objects like { photo, info }.
      // 'photo' has the photo data while 'info' contains metadata
      // about that particular image compression (e.g. time taken).

      const { photo, info } = conversions[0]

      console.log({ photo, info })

     // was using this to append to the form data
      newblob = photo.data;

      // Create an object URL which points to the photo Blob data
      const objectUrl = URL.createObjectURL(photo.data)

      // Set the preview img src to the object URL and wait for it to load
      Compress.loadImageElement(preview, objectUrl).then(() => {
        // Revoke the object URL to free up memory
        URL.revokeObjectURL(objectUrl)
      })
    })
  },
  false
)

过去两天我一直在努力实现它。 我尝试在 for 循环中运行它

<input type="file" accept="image/*" multiple id="image"> <div id="" class="col previewdiv"></div>

$(function() {

    var imgPreviewUpld = function(input, divId) {

        if (input.files) {
            var numberOfImages = input.files.length;

            for (i = 0; i < numberOfImages; i++) {




                $($.parseHTML('<img>')).attr({id : "preview"+i, class:"img-fluid"}).css({"max-height":"200px","max-width":"300px"}).appendTo(divId);

                               const options = {
                                    targetSize: 0.2,
                                    quality: 0.75,
                                    maxWidth: 800,
                                    maxHeight: 600
                                        }
                                        const compress = new Compress(options)


                                const files = [...input.files]
                                                // const files = [evt.files];
                                compress.compress(files).then((conversions) => {
                                // Conversions is an array of objects like { photo, info }.
                                // 'photo' has the photo data while 'info' contains metadata
                                // about that particular image compression (e.g. time taken).

                                const { photo, info } = conversions[0]

                                console.log({ photo, info })

                                //to append to the form data
                                newblob+i = photo.data;
                                // Create an object URL which points to the photo Blob data
                                const objectUrl = URL.createObjectURL(photo.data)

                                // Set the preview img src to the object URL and wait for it to load
                                Compress.loadImageElement(preview+i, objectUrl).then(() => {
                                    // Revoke the object URL to free up memory
                                    // URL.revokeObjectURL(objectUrl)
                                })
                                })                               

            }




        }

    };

    $('#image').on('change', function(evt) {
        imgPreviewUpld(this, 'div.previewdiv');




    });
});

请大家帮助我。我是 javascript 世界的初学者，但我想为我自己的项目之一做到这一点。

谢谢