上传到服务器时图片文件大小会增加

这种情况可能是因为上传的图片没有进行压缩或优化造成的。可以通过以下代码实现图片压缩和优化：

// 获取input file输入框中选中的图片
const file = document.querySelector('input[type="file"]').files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
  const image = new Image();
  image.src = reader.result;
  image.onload = function () {
    // 创建一个canvas元素
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // 设置canvas的宽高和图片一样
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    // 在canvas上绘制图片
    ctx.drawImage(this, 0, 0);
    // 将canvas转成base64格式的图片
    const compressedImage = canvas.toDataURL('image/jpeg', 0.8);
    // 在这里将压缩后的图片上传到服务器即可
  };
};

这段代码首先获取页面中input file输入框中选中的图片，然后通过FileReader读取图片数据，并转换成base64格式。接着将图片数据转换成Image对象，然后在Image对象加载完成后，在canvas上绘制图片。最后将canvas转换成base64格式的图片，并上传到服务器。这样就可以实现图片的压缩和优化，减小图片的文件大小。