当前位置：首页 > VUE

vue实现图片压缩上传

2026-01-20 13:25:34VUE

实现图片压缩上传的方法

使用HTML5的Canvas进行压缩

通过Canvas的drawImage和toDataURL方法实现图片压缩。创建一个input元素用于选择图片，监听change事件处理压缩逻辑。

<input type="file" accept="image/*" @change="handleImageUpload" />

methods: {
  handleImageUpload(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 设置压缩后的宽度（保持比例）
        const MAX_WIDTH = 800;
        const scale = MAX_WIDTH / img.width;
        canvas.width = MAX_WIDTH;
        canvas.height = img.height * scale;

        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        canvas.toBlob((blob) => {
          this.uploadCompressedImage(blob);
        }, 'image/jpeg', 0.7); // 质量参数0.7（0-1）
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }
}

使用第三方库（如compressorjs）

安装compressorjs库可以简化压缩流程：

npm install compressorjs

在Vue组件中引入并使用：

import Compressor from 'compressorjs';

methods: {
  compressImage(file) {
    new Compressor(file, {
      quality: 0.6,
      maxWidth: 1024,
      success: (compressedFile) => {
        this.uploadCompressedImage(compressedFile);
      },
      error: (err) => {
        console.error('压缩失败:', err);
      }
    });
  }
}

上传压缩后的图片

通过FormData将压缩后的图片发送到服务器：

uploadCompressedImage(blob) {
  const formData = new FormData();
  formData.append('file', blob, 'compressed.jpg');

  axios.post('/api/upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  }).then(response => {
    console.log('上传成功', response.data);
  }).catch(error => {
    console.error('上传失败', error);
  });
}

显示上传进度

添加进度条反馈用户体验：

axios.post('/api/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: (progressEvent) => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`上传进度: ${percent}%`);
  }
})