js实现压缩base64图片压缩并上传

以下是一个示例代码，使用canvas将图片压缩为指定大小，然后将压缩后的base64字符串上传到服务器。

HTML代码：

<input type="file" id="file-input">

JavaScript代码：

// 获取文件输入框元素
const fileInput = document.getElementById('file-input');

// 监听文件输入框变化事件
fileInput.addEventListener('change', () => {
  // 获取文件对象
  const file = fileInput.files[0];

  // 创建 FileReader 对象
  const reader = new FileReader();

  // 读取文件完成事件
  reader.addEventListener('load', () => {
    // 创建图像对象
    const img = new Image();

    // 图像加载完成事件
    img.addEventListener('load', () => {
      // 创建 canvas 对象
      const canvas = document.createElement('canvas');

      // 缩放比例
      const scale = Math.min(800 / img.width, 800 / img.height);

      // 设置 canvas 大小
      canvas.width = img.width * scale;
      canvas.height = img.height * scale;

      // 绘制图像到 canvas 中
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      // 将 canvas 转为 base64 字符串
      const base64 = canvas.toDataURL('image/jpeg', 0.8);

      // 发送 base64 字符串到服务器
      uploadBase64(base64);
    });

    // 加载图像
    img.src = reader.result;
  });

  // 读取文件
  reader.readAsDataURL(file);
});

// 上传 base64 字符串到服务器
function uploadBase64(base64) {
  // 发送 AJAX 请求
  // ...
}

这里使用 canvas 将图片压缩为指定大小，然后将压缩后的 base64 字符串上传到服务器。在实际开发中，还需要根据具体需求进行调整，比如调整压缩比例、设置图片格式、设置上传方式等等。