vant的上传组件取消默认预览展示

Vant 是一个流行的移动端 Vue 组件库，它提供了一系列针对移动端优化的组件。在 Vant 的组件中，上传组件（Upload）允许用户选择或拖拽文件上传到服务器。默认情况下，上传组件会展示一个预览图，让用户能够预览即将上传的图片或文件。如果你不希望展示这个预览图，可以对组件进行适当的配置来取消这个功能。

在 Vant 3.x 版本中，上传组件的预览功能是通过插槽（slot）来实现的。要取消默认的预览展示，你可以使用具名插槽`preview`并留空，或者通过逻辑控制来决定是否展示预览。下面是一个简单的示例代码：

// 在你的 Vue 组件中
<template>
  <van-upload
    action="https://www.example.com/upload"
    :before-read="beforeRead"
    :after-read="afterRead"
  >
    <van-button icon="plus-o" type="info">上传文件</van-button>
    <!-- 不展示默认预览 -->
    <template v-slot:preview="{ file }">
      <!-- 这里可以自定义预览内容或留空 -->
    </template>
  </van-upload>
</template>

<script>
import { VanUpload, VanButton } from 'vant';

export default {
  components: {
    VanUpload,
    VanButton,
  },
  methods: {
    beforeRead(file) {
      // 上传前的回调，可以返回一个 Promise 来阻止上传
      return new Promise((resolve, reject) => {
        // 可以在这里做文件大小校验等操作
        resolve();
      });
    },
    afterRead() {
      // 读取文件后的回调
      console.log('文件读取完成');
    },
  },
};
</script>

在这个示例中，我们使用了具名插槽`preview`，但并没有在其中放置任何内容，因此默认的预览展示就会被取消。如果你需要自定义预览方式，可以在插槽中添加自己的 HTML 结构和逻辑处理。