vue 压缩图片后上传

在Vue应用中，压缩图片并上传通常涉及到前端处理和后端接收两个部分。以下是一个简化的步骤：

1. 使用HTML5 File API及vue-file-preview库：首先，在Vue组件中创建一个文件输入元素，允许用户选择图片。你可以使用`@change`事件来获取选中的文件。

<input type="file" @change="handleImageUpload">

2. 压缩图片：在`handleImageUpload`函数中，可以使用第三方库如`sharp`（Node.js）或`canvas`（浏览器原生）对图片进行压缩。例如，`sharp`的用法：

import sharp from 'sharp';

async function compressImage(file) {
  const resized = await sharp(file)
    .resize(800, 600) // 可调整大小以适应需求
    .jpeg({ quality: 0.9 }) // 调整压缩质量（范围0-1）
    .toBuffer();
  
  return resized;
}

3. 文件上传：压缩后的图片数据可以发送到服务器。可以使用axios、fetch等库来发送POST请求，并附带压缩后的base64编码数据或直接将缓冲区作为二进制数据发送。

methods: {
  handleImageUpload(e) {
    const file = e.target.files[0];
    if (file) {
      const compressedImage = compressImage(file);
      uploadToServer(compressedImage);
    }
  },
  async uploadToServer(buffer) {
    try {
      const response = await axios.post('/api/upload', { image: buffer });
      console.log(response.data); // 处理服务器返回的数据
    } catch (error) {
      console.error(error);
    }
  }
}