基于 Vue 2 和 Vant 2 的附件上传示例，可以实现上传单个或多个文件，并调用接口进行文件上传

好的，以下是基于Vue 2和Vant 2的附件上传示例，可以实现上传单个或多个文件，并调用接口进行文件上传的代码：

1. 安装Vant和axios：

npm install vant axios --save

2. 在Vue项目中引入Vant和axios：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
import axios from 'axios';

Vue.use(Vant);
Vue.prototype.$axios = axios;

3. 在Vue组件中使用van-uploader组件：

<template>
  <div>
    <van-uploader
      v-model="files"
      :max-count="maxCount"
      :before-read="beforeRead"
      :on-remove="onRemove"
      :on-exceed="onExceed"
      :preview-options="{closeable: true}"
      :deletable="deletable"
      :show-upload="false"
    >
      <van-button icon="plus" type="primary">上传附件</van-button>
    </van-uploader>
    <van-button type="primary" @click="upload">上传</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [], // 上传的文件列表
      maxCount: 3, // 最大上传数量
      deletable: true, // 是否可删除已上传的文件
    }
  },
  methods: {
    beforeRead(file) {
      // 上传前的处理逻辑，如判断文件大小、类型等
      // 返回false阻止上传，返回true执行上传操作
      return true;
    },
    onRemove(file, detail) {
      // 删除已上传的文件
      console.log('file', file);
      console.log('detail', detail);
    },
    onExceed(files, detail) {
      // 超出最大上传数量时的处理逻辑
      console.log('files', files);
      console.log('detail', detail);
    },
    upload() {
      // 上传文件
      const formData = new FormData();
      this.files.forEach(file => {
        formData.append('file', file.file);
      });
      this.$axios.post('/api/upload', formData).then(res => {
        console.log('上传成功', res);
      }).catch(err => {
        console.log('上传失败', err);
      });
    },
  },
}
</script>

以上代码中，van-uploader组件的各个属性含义如下：

- v-model：绑定上传的文件列表；
- :max-count：上传文件数量的最大值；
- :before-read：上传前的处理逻辑，返回false阻止上传，返回true执行上传操作；
- :on-remove：删除已上传的文件时的处理逻辑；
- :on-exceed：超出最大上传数量时的处理逻辑；
- :preview-options：文件预览的配置项，如是否可关闭等；
- :deletable：是否可删除已上传的文件；
- :show-upload：是否显示上传按钮。

在实现文件上传时，我们只需将上传逻辑改为调用接口进行文件上传即可。同时，需要将上传的文件列表转换为FormData格式，以便使用axios进行文件上传。在组件中定义beforeRead、onRemove、onExceed和upload方法，用于上传前的处理逻辑、删除已上传的文件时的处理逻辑、超出最大上传数量时的处理逻辑和文件上传逻辑。在upload方法中，以FormData格式将上传的文件列表作为参数调用接口进行文件上传。