uview-plus Upload 上传压缩图片

UView Plus 是一款基于 Vue 的 UI 组件库，它提供了丰富的组件和功能，包括文件上传组件。对于上传压缩图片，UView Plus 中的 `u-file-upload` 组件支持设置一些配置项来实现这个需求。你可以使用 `before-upload` 或者 `on-success` 事件处理函数，在图片上传成功后，对其进行压缩处理。

以下是一个简单的示例：

<u-file-upload
  v-model="fileList"
  :accept="'.jpg,.jpeg,.png'"
  :before-upload="compressImage"
>
</u-file-upload>

<script>
export default {
  methods: {
    compressImage(file) {
      // 使用第三方库如 sharp 进行图片压缩
      const sharp = require('sharp');
      return new Promise((resolve, reject) => {
        sharp(file)
          .resize(800) // 设置压缩后的宽度
          .toBuffer((err, buffer) => {
            if (err) {
              reject(err);
            } else {
              resolve(buffer); // 返回压缩后的数据
            }
          });
      })
      .then(compressedData => {
        // 将压缩后的数据替换原图并上传
        file.data = compressedData;
        this.uploadFile(file); // 自定义的上传函数
      });
    },
    uploadFile(file) {
      // 这里可以将压缩后的图片上传到服务器
      console.log('Uploading compressed image...', file);
      // 实际应用中替换为实际的上传逻辑
    },
  }
};
</script>