van-uploader 与cropperjs 配合编写vue3例子

Van-Uploader 和 CropperJS 是两个常用的前端文件上传和图片裁剪库，它们可以很好地配合用于Vue3项目中，实现用户上传图片并对其进行预览或裁剪的功能。

范例代码可能会像这样：

<template>
  <div>
    <van-upload
      ref="uploader"
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      accept="image/*"
    >
      <van-image-cropper
        v-model="src"
        :preview-src="src"
        :min-size="[100, 100]"
        @crop-end="handleCropEnd"
      ></van-image-cropper>
      <input type="file" style="display:none;">
    </van-upload>
  </div>
</template>

<script>
import { ref } from 'vue';
import VanUploader from 'vant/upload';
import VanImageCropper from 'vant/image-cropper';

export default {
  setup() {
    const uploadUrl = 'your-server-url'; // 你的服务器接收文件的URL
    const src = ref('');
    const uploader = ref(new VanUploader());
    
    async function beforeUpload(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        alert('只支持jpg和png类型的图片');
        return false;
      }
    }

    function handleSuccess(response) {
      console.log(response);
      // 这里可以处理上传成功的操作，比如将响应数据赋给src
      src.value = response.data.url;
    }

    function handleCropEnd(result) {
      // result包含裁剪后的尺寸等信息，可以根据需要进一步操作
      console.log(result);
    }

    return {
      uploadUrl,
      src,
      uploader,
      // ...其他组件相关的数据和方法
    };
  },
};
</script>