vue+ant-design-vue中的a-upload上传文件 前端 anti-design-vue vue.js 使用a-u

vue+ant-design-vue中的a-upload上传文件

前端

anti-design-vue

vue.js

使用a-upload上传文件，需要对文件坐判断，

但是beforeupload方法还没走完，action上传方法就同步在上传了。@change方法也在同时进行

在Vue和Ant Design Vue中使用A-Upload上传文件时，可以使用before-upload方法来进行文件的判断和处理。然而，由于before-upload是异步的，而上传方法是同步的，所以可能会出现before-upload方法还没走完，而上传方法就已经开始执行的情况。为了解决这个问题，你可以使用Promise来确保before-upload方法执行完毕后再进行上传。

首先，在上传按钮的事件处理方法中，可以使用Promise来包装before-upload方法，确保它的执行完成：

handleUpload() {

  return new Promise((resolve, reject) => {

    // 调用before-upload方法，进行文件的判断和处理

    this.beforeUpload()

      .then(() => {

        // before-upload方法执行完成，可以执行上传方法

        this.uploadFile();

        resolve();  // resolve Promise

      })

      .catch((error) => {

        reject(error);  // reject Promise

      });

  });

},

然后，在before-upload方法中，你可以使用Vue.nextTick方法来确保@change方法执行完毕后再进行判断和处理：

beforeUpload() {

  // 返回一个Promise，在Promise中执行@change方法后再进行判断和处理

  return new Promise((resolve, reject) => {

    // 使用Vue.nextTick确保@change方法执行完毕

    this.$nextTick(() => {

      // 在这里进行文件的判断和处理

      // ...

      resolve();  // resolve Promise

    });

  });

},

这样，无论是before-upload方法还是@change方法，都会按照顺序执行，确保在上传文件之前进行必要的文件判断和处理。