Vue 图片上传压缩与服务器上传

Vue 图片上传压缩与服务器上传

本文介绍了如何在 Vue 项目中使用 image-compressor 库压缩图片，并通过 axios 库将压缩后的图片上传到服务器。

1. 安装 image-compressor

使用 npm 安装 image-compressor 库：

npm install image-compressor --save

2. 编写压缩和上传函数

在 Vue 组件中添加以下代码：

import ImageCompressor from 'image-compressor';

...

methods: {
  handleImgChange(e) {
    const files = e.target.files || e.dataTransfer.files;
    if (!files.length) {
      return;
    }
    const compressOptions = { // 压缩选项
      quality: 0.6, // 图片质量，0-1之间，默认为0.6
      maxWidth: 800, // 图片最大宽度，默认为800
      maxHeight: 800, // 图片最大高度，默认为800
      mimeType: 'image/jpeg', // 压缩后的图片格式，默认为'image/jpeg'
    };
    const compressPromises = Array.from(files).map((file) => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          const img = new Image();
          img.src = event.target.result;
          img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = compressOptions.maxWidth;
            canvas.height = compressOptions.maxHeight;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            canvas.toBlob((blob) => {
              resolve(blob);
            }, compressOptions.mimeType, compressOptions.quality);
          };
        };
        reader.onerror = (error) => reject(error);
        reader.readAsDataURL(file);
      });
    });

    Promise.all(compressPromises)
      .then((compressedBlobs) => {
        // 调用上传服务器的方法
        this.uploadToServer(compressedBlobs);
      })
      .catch((error) => {
        console.error('图片压缩失败:', error);
      });
  },

  uploadToServer(files) {
    const formData = new FormData();
    files.forEach((file, index) => {
      formData.append(`file${index}`, file);
    });

    // 使用axios或其他方法上传formData到服务器
    axios.post(this.uploadImgURL, formData)
      .then((response) => {
        console.log('上传成功:', response.data);
        // 处理上传成功的逻辑
      })
      .catch((error) => {
        console.error('上传失败:', error);
        // 处理上传失败的逻辑
      });
  },
},

3. 使用代码

在你的 Vue 组件中，可以使用 handleImgChange 方法来处理图片选择事件，该方法会调用 image-compressor 库压缩图片，并通过 uploadToServer 方法将压缩后的图片上传到服务器。

4. 注意事项

• 以上代码仅为参考，可能还需要根据实际情况进行适当的调整。
• 压缩选项 compressOptions 可以根据实际需求进行修改。
• uploadToServer 方法中使用 axios 库上传图片，你也可以使用其他库或方法进行上传。
• 上传图片到服务器后，还需要处理上传成功或失败的逻辑。

总结

本文介绍了如何在 Vue 项目中使用 image-compressor 库压缩图片，并通过 axios 库将压缩后的图片上传到服务器。希望这篇文章对你有所帮助。