当前位置：首页 > VUE

vue实现图片压缩上传

2026-02-21 05:24:14VUE

实现图片压缩上传的方法

在Vue中实现图片压缩上传通常涉及以下步骤，结合前端压缩库和文件上传逻辑：

使用canvas压缩图片

安装依赖库（如compressorjs）：

npm install compressorjs

在Vue组件中实现压缩逻辑：

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

<script>
import Compressor from 'compressorjs';

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

      new Compressor(file, {
        quality: 0.6,
        maxWidth: 800,
        maxHeight: 800,
        success(result) {
          const formData = new FormData();
          formData.append('file', result, result.name);

          // 上传到服务器
          axios.post('/upload', formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
          }).then(response => {
            console.log('上传成功', response);
          });
        },
        error(err) {
          console.error('压缩失败:', err);
        }
      });
    }
  }
};
</script>

纯前端实现压缩

若不使用第三方库，可通过canvas API实现基础压缩：

compressImage(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (event) => {
      const img = new Image();
      img.src = event.target.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 设置压缩尺寸
        const MAX_WIDTH = 800;
        const MAX_HEIGHT = 800;
        let width = img.width;
        let height = img.height;

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }

        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);

        canvas.toBlob((blob) => {
          resolve(new File([blob], file.name, {
            type: 'image/jpeg',
            lastModified: Date.now()
          }));
        }, 'image/jpeg', 0.7);
      };
    };
  });
}

上传至服务器

压缩后的文件可通过FormData上传：

vue实现图片压缩上传

async uploadFile() {
  const compressedFile = await this.compressImage(this.selectedFile);
  const formData = new FormData();
  formData.append('file', compressedFile);

  try {
    const response = await axios.post('/api/upload', formData);
    console.log('上传结果:', response.data);
  } catch (error) {
    console.error('上传失败:', error);
  }
}