vue 做一个图片压缩，压缩尺寸为256宽，压缩尺寸不大于50k

你可以使用 `canvas` 和 `FileReader` 对图片进行压缩，具体操作如下：

1. 创建一个 `input` 元素，用于选择本地图片

<input type="file" ref="fileInput" @change="handleFileChange">

2. 监听 `input` 元素的 `change` 事件，获取选择的图片文件，并将其转换为 `base64` 格式

handleFileChange() {
  const file = this.$refs.fileInput.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    const img = new Image();
    img.src = reader.result;
    img.onload = () => {
      this.compressImage(img);
    };
  };
},

3. 创建一个 `canvas` 元素，将图片绘制到 `canvas` 上，并对其进行压缩

compressImage(img) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const originWidth = img.width;
  const originHeight = img.height;
  const maxWidth = 256;
  let targetWidth = originWidth;
  let targetHeight = originHeight;
  if (originWidth > maxWidth) {
    targetWidth = maxWidth;
    targetHeight = (originHeight * maxWidth) / originWidth;
  }
  canvas.width = targetWidth;
  canvas.height = targetHeight;
  ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
  const base64 = canvas.toDataURL('image/jpeg', 0.8);
  this.uploadImage(base64);
},

4. 将压缩后的图片上传到服务器或保存到本地

uploadImage(base64) {
  // 将 base64 转换为 Blob 对象
  const blob = this.dataURLtoBlob(base64);
  // 创建 FormData 对象，用于上传图片
  const formData = new FormData();
  formData.append('file', blob, 'image.jpg');
  // 发送请求上传图片
  axios.post('/upload', formData).then((res) => {
    console.log(res.data);
  });
},

需要注意的是，压缩后的图片大小可能会略大于50k，因此你可以在压缩时控制压缩质量或者在上传前对图片进行再次压缩，直到满足要求为止。