vue 图片和适配file上传前压缩大小

您可以使用一些库或工具来压缩图片大小，然后再进行文件上传。以下是一种常见的方法：

1. 首先，您可以使用`HTML5 Canvas`来进行图片的压缩。您可以将图像绘制到一个临时的Canvas中，然后在导出之前调整其尺寸。这可以通过以下步骤实现：

function compressImage(file, maxWidth, maxHeight, quality) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (event) {
      const img = new Image();
      img.src = event.target.result;
      img.onload = function () {
        const canvas = document.createElement('canvas');
        let width = img.width;
        let height = img.height;

        if (width > height) {
          if (width > maxWidth) {
            height *= maxWidth / width;
            width = maxWidth;
          }
        } else {
          if (height > maxHeight) {
            width *= maxHeight / height;
            height = maxHeight;
          }
        }

        canvas.width = width;
        canvas.height = height;

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

        canvas.toBlob(function (blob) {
          resolve(blob);
        }, file.type, quality);
      };
    };
    reader.onerror = function (error) {
      reject(error);
    };
    reader.readAsDataURL(file);
  });
}

上述函数`compressImage`接受四个参数：`file`为要压缩的图片文件，`maxWidth`和`maxHeight`为期望的最大宽度和高度，`quality`为压缩质量（0-1之间的值，1表示最高质量）。

2. 然后，您可以使用`axios`或其他网络请求库将压缩后的图片文件上传到服务器。

const formData = new FormData();
formData.append('file', compressedImageFile);

axios.post('/upload', formData)
  .then(response => {
    console.log('上传成功');
  })
  .catch(error => {
    console.error('上传失败', error);
  });

上述代码将压缩后的图片文件添加到`FormData`对象中，然后使用`axios.post`方法将其上传到服务器的`/upload`接口。

请注意，以上代码仅为示例，您可能需要根据您的具体需求进行适当调整。另外，您还可以使用其他基于Canvas的图片处理库或基于HTML5 File API的库来完成相同的任务。