使用 JavaScript 压缩图片并上传到服务器

您可以使用JavaScript中的canvas元素来压缩图片并将其上传到服务器。以下是一个示例函数，它接受一个图片文件对象，压缩图片并上传到指定的URL：

function compressAndUploadImage(file) {
  return new Promise((resolve, reject) => {
    const maxWidth = 800; // 设置压缩后图片的最大宽度
    const maxHeight = 800; // 设置压缩后图片的最大高度
    const quality = 0.7; // 设置图片的压缩质量

    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(event) {
      const img = new Image();
      img.src = event.target.result;
      img.onload = function() {
        let width = img.width;
        let height = img.height;

        if (width > maxWidth || height > maxHeight) {
          const ratio = Math.max(width / maxWidth, height / maxHeight);
          width /= ratio;
          height /= ratio;
        }

        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;

        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);

        canvas.toBlob(function(blob) {
          const formData = new FormData();
          formData.append('file', blob, file.name);

          const xhr = new XMLHttpRequest();
          xhr.open('POST', window._CONFIG['domainUrl'] + '/sys/common/upload');
          xhr.onload = function() {
            if (xhr.status === 200) {
              resolve(xhr.responseText);
            } else {
              reject(xhr.statusText);
            }
          };
          xhr.onerror = function() {
            reject(xhr.statusText);
          };
          xhr.send(formData);
        }, file.type || 'image/jpeg', quality);
      };
    };
    reader.onerror = function(error) {
      reject(error);
    };
  });
}

您可以将上述函数与您的代码集成，在handleImgChange方法中调用该函数：

handleImgChange({ fileList }) {
  this.photo = fileList.slice(-4);

  // 压缩并上传图片
  const uploadPromises = this.photo.map(file => compressAndUploadImage(file));

  Promise.all(uploadPromises)
    .then(responses => {
      // 所有图片都上传成功
      console.log(responses);
      // 在此处执行其他操作，如更新服务器返回的图片URL等
    })
    .catch(error => {
      // 处理上传错误
      console.error(error);
    });
}

这个示例函数会将图片压缩到指定的最大宽度和高度，并根据指定的压缩质量生成压缩后的图片。然后，它会将压缩后的图片作为Blob对象上传到服务器。请注意，由于使用了Promise.all，它可以处理多个图片同时上传的情况。