van-uploader上传图片时进行压缩

van-uploader是一个Vue.js前端文件上传组件，它可以帮助你在项目中轻松地处理图片上传。如果你想在上传图片的同时进行压缩，van-uploader提供了配置选项来实现这个功能。

首先，你需要安装van-uploader及其相关的插件，例如`vue-file-preview`（用于预览图片）和`sharp`（Node.js的一个库，用于图像处理，包括压缩）。你可以使用npm或yarn进行安装：

npm install vant-upload vue-file-preview sharp
# 或者
yarn add vant-upload vue-file-preview sharp

然后，在van-uploader组件的配置里，可以设置一个图片上传钩子（upload hook），在这个钩子中使用sharp来进行图片压缩。以下是一个简单的示例：

<template>
  <van-uploader :on-success="handleSuccess" ...></van-uploader>
</template>

<script>
import { ref } from 'vue';
import VanUploader from 'vant/dist/upload/index.vue';
import preview from 'vue-file-preview';

export default {
  components: {
    VanUploader,
    preview
  },
  setup() {
    const imageUrl = ref('');
    
    const handleSuccess = (file) => {
      file.data.url = compressImage(file.originFileUrl);
      imageUrl.value = file.data.url;
    };
  
    const compressImage = async (src) => {
      const resizedImage = await sharp(src)
        .resize(800, // 设置想要的压缩尺寸
               { fit: 'inside' }) // 保持宽高比
        .toBuffer();
      return resizedImage.toString('base64');
    };

    return { imageUrl, VanUploader };
  }
};
</script>

在这个例子中，当图片成功上传后，`handleSuccess`函数会将原图URL替换为压缩后的Base64编码字符串。`compressImage`函数是异步的，因为它使用了Node.js的sharp库来处理图片。