Vue Ant Design 上传图片压缩功能实现 - 使用 browser-image-compression 库

Vue Ant Design 上传图片压缩功能实现 - 使用 browser-image-compression 库

在 Vue Ant Design 项目中，上传图片功能非常常见，但上传大尺寸图片会影响用户体验和消耗大量带宽。为了解决这个问题，我们可以使用 browser-image-compression 库对图片进行压缩，然后再上传到服务器。

示例代码：

// 引入压缩图片的库
import imageCompression from 'browser-image-compression';

// 压缩图片并上传
async function compressAndUploadImage(file) {
  try {
    // 设置压缩选项
    const options = {
      maxSizeMB: 1, // 设置最大文件大小为1MB
      maxWidthOrHeight: 800, // 设置最大宽度或高度为800px
      useWebWorker: true // 使用Web Worker进行压缩，加快速度
    };
    
    // 压缩图片
    const compressedFile = await imageCompression(file, options);
    
    // 创建FormData对象，并将压缩后的文件添加到FormData中
    const formData = new FormData();
    formData.append('file', compressedFile, compressedFile.name);
    
    // 发送上传请求
    const response = await axios.post(uploadImgURL, formData);
    
    // 在这里处理上传成功的逻辑
    console.log('图片上传成功');
    console.log(response.data);
  } catch (error) {
    // 在这里处理上传失败的逻辑
    console.error('图片上传失败');
    console.error(error);
  }
}

// 在handleImgChange函数中调用压缩并上传函数
handleImgChange(event) {
  const files = event.target.files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    compressAndUploadImage(file);
  }
}

步骤：

1. 安装 browser-image-compression 库：

   npm install browser-image-compression
   

2. 引入库并定义压缩和上传函数：

   在你的组件中引入 browser-image-compression 库，并定义 compressAndUploadImage 函数，该函数接收一个文件作为参数，并进行压缩和上传操作。

3. 设置压缩选项：

   在 compressAndUploadImage 函数中，通过 options 对象设置压缩选项，例如最大文件大小、最大宽度或高度、是否使用 Web Worker 等。

4. 使用 imageCompression 函数压缩图片：

   使用 imageCompression 函数压缩文件，并获得压缩后的文件。

5. 创建 FormData 对象并上传：

   创建 FormData 对象，将压缩后的文件添加到 FormData 中，并使用 axios 等库发送上传请求。

6. 处理上传结果：

   根据上传结果进行相应的处理，例如显示成功或失败提示信息。

注意：

• 需要将 uploadImgURL 替换为你的实际上传图片的服务器接口地址。
• 可以根据你的实际需求调整压缩选项。
• 确保 axios 等库已安装。

通过以上步骤，你就可以轻松实现 Vue Ant Design 上传图片压缩功能，提高用户体验和节省带宽。