vue、vant上传附件功能实现

实现该功能的预览效果如下：

 

1、在beforeMount（）{}中，创建formData，因为该上传文件需要和其他的数据，以form的形式传到后台进行判断。

 beforeMount() { 

        this.formData = new FormData();

}

2、前台的vant上传组件代码如下：

<van-field name="file" label="文件上传:">

        <template #input>

          <van-uploader v-model="uploader" :after-read="afterRead" @delete="deleteFile" :multiple="true" />

        </template>

    </van-field>

 引入：

import { Uploader, Form, Toast, Field, Button } from 'vant'; 

 初始化：

data() {

        return{

           uploader: [],

           formData: {},

        };

}

 components: {

    [Uploader.name]: Uploader,

    [Form.name]: Form,

    [Field.name]: Field,

    [Button.name]: Button,

  },

 

3、 afterRead： 文件读取完成后的回调函数（在methods里，获取当前文件的key、value）

afterRead(file) {

      // 此时可以自行将文件上传至服务器

      this.formData.append(file.file.name, file.file);

    },

 4、 deleteFile:文件删除前的回调函数，返回 false 可终止文件读取，支持返回 Promise

deleteFile(file) {

      if (file.file) {

        this.formData.delete(file.file.name);

      } else {

        axios({

          method: 'post',

          url: '自己的接口',

          data: {

            userId: this.userId,

            fileId: file.fileId,

          },

        })

          .then((res) => {

            // console.log(res);

          })

          .catch(() => {

            Toast.fail('删除异常');

          });

      }

    }

 

补充：就是删除之前需要判断该文件类型是否是文件类型，如果是则找到该formData中的key，进行删除。
 

  if (file.file) {

        this.formData.delete(file.file.name);

      }

 

5、 multiple  vant自带属性 ：是否开启图片多选，部分安卓机型不支持

6、请求之前需要将所有数据插入到formData中，然后请求时候的data是 this.formData，请求数据后，无论成功与否，都需要将插入的formData删除。

submitAudit() {
      this.loading = true;
      this.formData.append('userId', this.userId);
      this.formData.append('auditId', this.auditId);
      this.formData.append('auditResult', this.auditResult);
      this.formData.append('realPay', Number(this.realPay));
      this.formData.append('remarks', this.remarks);
      axios({
        method: 'post',
        url: '/api/*****',
        data: this.formData,
      }).then((res) => {
        console.log(res, 'submitopnion');
        this.loading = false;
        if (res.data.returnCode === 0) {
          this.disabled = true;
          Toast.success({ message: '提交成功', duration: 1000 });
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        } else {
          this.disabled = false;
          Toast.fail(res.data.message);
        }
        this.formData.delete('userId', this.userId);
        this.formData.delete('auditId', this.auditId);
        this.formData.delete('auditResult', this.auditResult);
        this.formData.delete('realPay', Number(this.realPay));
        this.formData.delete('remarks', this.remarks);
      })
        .catch(() => {
          this.formData.delete('userId', this.userId);
          this.formData.delete('auditId', this.auditId);
          this.formData.delete('auditResult', this.auditResult);
          this.formData.delete('realPay', Number(this.realPay));
          this.formData.delete('remarks', this.remarks);
          Toast.fail('请求超时');
        });
    },