基于Vue和Vant的uploader组件实现拖拽上传

<template>
  <div class="drag-upload">
    <van-uploader
      v-model="fileList"
      multiple
      :after-read="afterRead"
      :max-count="3"
      @oversize="onOversize"
      class="drag-box"
      drag
    >
      <div v-if="fileList.length < 3" class="drag-content">
        <p>拖拽文件到这里，或<em>点击上传</em></p>
        <p>支持上传jpg/png文件，且不超过500kb</p>
      </div>
    </van-uploader>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Uploader } from 'vant';

export default {
  components: {
    [Uploader.name]: Uploader,
  },
  setup() {
    const fileList = ref([]);

    const afterRead = (file) => {
      // 文件读取成功后的处理逻辑
      console.log('文件读取成功:', file);
    };

    const onOversize = (file) => {
      // 文件大小超过限制时的处理逻辑
      Toast.fail('文件大小不能超过500KB');
    };

    return {
      fileList,
      afterRead,
      onOversize,
    };
  },
};
</script>

<style scoped>
.drag-upload {
  width: 300px;
  margin: 0 auto;
}

.drag-box {
  border: 2px dashed #d9d9d9;
  border-radius: 4px;
  background-color: #fafafa;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.drag-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.drag-box:hover {
  border-color: #1989fa;
}
</style>

代码说明

‌模板部分‌：
使用组件，并设置drag属性以启用拖拽上传功能。
通过v-model绑定fileList数组，用于存储已上传的文件。
使用:after-read和@oversize事件处理文件读取成功和文件大小超过限制的情况。
当fileList.length < 3时，显示拖拽上传的提示内容。

‌脚本部分‌：
使用Vue 3的Composition API，通过ref定义响应式变量fileList。
定义afterRead函数，用于处理文件读取成功后的逻辑。
定义onOversize函数，用于处理文件大小超过限制时的逻辑。

‌样式部分‌：
设置拖拽上传区域的样式，包括边框、背景色、文本对齐方式等。
使用position: relative和transform: translate(-50%, -50%)将提示内容居中显示。
添加:hover伪类样式，当鼠标悬停在拖拽上传区域时，改变边框颜色。

*请确保在你的项目中正确引入Vant库，并根据需要调整代码中的样式和功能。