compressorjs实现多张图片压缩及上传

CompressorJS是一个轻量级的JavaScript库，用于实现在浏览器端对图片进行动态压缩后再上传。它可以帮助你优化用户上传的图片大小，减少网络传输的时间和带宽消耗。以下是使用CompressorJS进行多张图片压缩并上传的基本步骤：

1. 引入CompressorJS库：首先需要在HTML文件中引入CompressorJS的脚本资源。

<script src="path/to/compressor.js"></script>

2. 创建压缩实例：创建Compressor对象，并设置压缩选项，如最大尺寸、质量等。

var compressor = new Compressor({
  quality: 0.8, // 图片质量范围0-1，默认0.85
  maxWidth: 1920, // 最大宽度
  maxHeight: 1080, // 最大高度
});

3. 获取图片元素：获取用户选择的图片输入框的FileList对象。

document.getElementById('imageInput').addEventListener('change', function(e) {
  var files = e.target.files;
  processFiles(files);
}, false);

4. 处理文件：遍历FileList，对每张图片调用compress方法进行压缩。

function processFiles(files) {
  for (var i = 0; i < files.length; i++) {
    if (!files[i].type.match('image.*')) continue;

    var reader = new FileReader();
    reader.onload = function(event) {
      var img = new Image();
      img.src = event.target.result;
      img.onload = function() {
        var compressedDataUrl = compressor.compress(img);
        uploadImage(compressedDataUrl, files[i]);
      };
    };
    reader.readAsDataURL(files[i]);
  }
}

function uploadImage(dataUrl, file) {
  // 这里可以将压缩后的dataURL发送到服务器进行上传，或者使用FormData构造函数
}

5. 实现上传：将压缩后的数据URL作为表单数据的一部分或者通过Ajax请求发送到服务器进行存储。

注意：以上示例未涉及具体的前端UI交互和服务器接口处理，实际应用中你需要根据项目需求构建完整的前端界面和相应的后台接口。同时，为了兼容旧版浏览器，你可能还需要做些额外的polyfill处理。