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

前端

anti-design-vue

vue.js

使用a-upload上傳文件，需要對文件坐判斷，

但是beforeupload方法還沒走完，action上傳方法就同步在上傳了。@change方法也在同時(shí)進(jìn)行

在Vue和Ant Design Vue中使用A-Upload上傳文件時(shí)，可以使用before-upload方法來進(jìn)行文件的判斷和處理。然而，由于before-upload是異步的，而上傳方法是同步的，所以可能會出現(xiàn)before-upload方法還沒走完，而上傳方法就已經(jīng)開始執(zhí)行的情況。為了解決這個(gè)問題，你可以使用Promise來確保before-upload方法執(zhí)行完畢后再進(jìn)行上傳。

首先，在上傳按鈕的事件處理方法中，可以使用Promise來包裝before-upload方法，確保它的執(zhí)行完成：

handleUpload() {

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

? ? // 調(diào)用before-upload方法，進(jìn)行文件的判斷和處理

? ? this.beforeUpload()

? ? ? .then(() => {

? ? ? ? // before-upload方法執(zhí)行完成，可以執(zhí)行上傳方法

? ? ? ? this.uploadFile();

? ? ? ? resolve();? // resolve Promise

? ? ? })

? ? ? .catch((error) => {

? ? ? ? reject(error);? // reject Promise

? ? ? });

? });

},

然后，在before-upload方法中，你可以使用Vue.nextTick方法來確保@change方法執(zhí)行完畢后再進(jìn)行判斷和處理：

beforeUpload() {

? // 返回一個(gè)Promise，在Promise中執(zhí)行@change方法后再進(jìn)行判斷和處理

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

? ? // 使用Vue.nextTick確保@change方法執(zhí)行完畢

? ? this.$nextTick(() => {

? ? ? // 在這里進(jìn)行文件的判斷和處理

? ? ? // ...

? ? ? resolve();? // resolve Promise

? ? });

? });

},

這樣，無論是before-upload方法還是@change方法，都會按照順序執(zhí)行，確保在上傳文件之前進(jìn)行必要的文件判斷和處理。